渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果
渐变是图片，通过 background-image设置
?可选值
? ? ? ? ?1： linear-gradient ['ɡreidi?nt]，线性渐变，颜色沿着一条直线发生变化
? ? ? ? ? ? ? ?语法：linear-gradient(方位,颜色1,颜色2)
? ? ? ? ? ? ? ? ? 参数1:表示方位，（可选值，不写默认是to bottom）
? ? ? ? ? ? ? ? ? ? ? ?(1)to left，to right, to bottom, to top
? ? ? ? ? ? ? ? ? ? ? ?(2)xxxdeg 表示角度，度数，会更灵活
? ? ? ? ? ? ? ? ? ? ? ? (3)turn 表示圈 .5turn
? ? ? ? ? ? ? ? ? ? ? ? ? ?参数2:颜色1
? ? ? ? ? ? ? ? ? ? ? ? ? ?参数3:颜色2
? ? ? ?注意：可以写多个颜色，默认情况下，颜色是均分占比的，也可以手动的指定渐变的分布情况，例如：background-image:linear-gradient(red 50px,yellow) ，颜色后直接跟占比
? ? ?2:repeating-linear-gradient() ? 可以平铺的线性渐变
? ? ? ?background-image: repeating-linear-gradient(yellow 0px, red 50px);
? ? ? ? ? 参数跟linear-gradient是一样的
? ? ? ? ?参数2-参数1，中间部分是渐变的颜色，拿总高度/差值，就是颜色重复出现的次数
?radial-gradient() ['reidi?l] ['ɡreidi?nt]
语法：background-image: radial-gradient();
? ? ? ? 默认情况下，圆心是根据元素的形状来计算的
? ? ? ? ? ? ? ? 正方形-->圆形
? ? ? ? ? ? ? ? 长方形-->椭圆型
? ? ? ? 参数1:圆心的形状
? ? ? ? （1）circle圆形，ellipse椭圆，
? ? ? ? （2）设置的大小 at 位置==>像素1 像素2 at 0px 0px
? ? ? ? 参数2:颜色1
? ? ? ? 参数3:颜色2
? ? ? ? ? ? ? ? ······
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
/* background-image:linear-gradient( red,yellow) ; */
background-image: repeating-linear-gradient(yellow 0px, red 100px);
background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>