线性渐变
liner-gradient属性值用来设置线性渐变，第一个参数值是方向，默认是从上往下，往后就是渐变颜色的种类。
background-image:liner-gradient(方向，颜色1，颜色2...)
.box { display: flex; width: 400px; height: 400px; background: linear-gradient(orange,red);//backgournd可以设置所有背景属性 }
方向设置：
- to+方位。首先我们可以使用to+方位改变位置，比如从下往上渐变，在颜色前面加上to top。我们还可以设置两个方位，这样就变成了对角线。
background: linear-gradient(to top right,orange,red);
- 角度表示。默认是从上往下，所以我们把中间分界线当成0deg,逆时针旋转90deg就是向右，这样子我们就可以用角度代表着方向，比如上面对角线我们可以写成
background: linear-gradient(45deg,orange,red);
颜色设置：
颜色设置就是通用的三种方式：
- 英文单词。
- 16进制。
- rgba。如果我们想要加透明度，那么就用rgba设置，最后一个代表的就是透明度。
径向渐变：
radial-gradient用来设置径向渐变，不同线性方向，径向需要设置形状，大小。
background-image:radial-gradient(形状，大小，颜色1，颜色2...)
默认从中心均匀地渐变。
形状设置
- 椭圆（默认值）。我们可以用ellipse将形状设置为椭圆。
- 圆形。用circle可以将形状变成圆。将上面的形状设置为圆如下：
background: radial-gradient(circle, orange, pink);
大小设置
- closest-side：用来设置从中心到最近的边的渐变大小；
- closest-corner：用来设置从中心到最近的角的渐变大小；
- farthest-side：用来设置从中心到最远的边的渐变大小；
- farthest-corner：用来设置从中心到最远的角的渐变大小； 具体数值用百分比设置就可以。
background: radial-gradient(closest-side at 10% 10%, orange, pink);
重复渐变：
如果我们在线性渐变/径向渐变前面加上repeating就是重复渐变，重复渐变需要我们给颜色设置大小，具体可以用百分比或px来表示
background: repeating-linear-gradient(45deg,orange, red 100px);
锥形渐变：
渐变的方式可以指定百分比等或是角度deg,默认从中心往上的线开始,顺时针开始旋转渐变
(1)指定渐变开始点
background:conic-gradient(white 45deg, black 90deg,red 180deg);
45deg以前的区间为白色
90deg的地方不渐变,其他区间会和前后的元素产生渐变
180deg的地方不渐变,之前的区间会和前面的元素产生渐变,之后不渐变
(2)只需要间断颜色,不需要渐变(设置起始点都为一个颜色,下一个颜色的起点为上一个的终点)
background:conic-gradient( #500 0, #500 45deg, #f00 45deg, #f00 90deg, #f50 90deg, #f50 135deg, #ff0 135deg,#ff0 180deg, #0c0 180deg, #0c0 225deg, #09d 225deg, #09d 270deg, #00b 270deg, #00b 315deg, #909 315deg, #909 360deg );
(3)重复锥形渐变
background:repeating-conic-gradient(颜色 渐变开始点,颜色2 渐变开始点2 ,...);
会根据0到最后一个渐变开始点的位置为一个整体,进行顺时针的重复填充
background:conic-gradient(#f00, #f50, #ff0, #0c0, #09d, #03a, #909, #f00); background:conic-gradient( #500 0, #500 45deg, #f00 45deg, #f00 90deg, #f50 90deg, #f50 135deg, #ff0 135deg,#ff0 180deg, #0c0 180deg, #0c0 225deg, #09d 225deg, #09d 270deg, #00b 270deg, #00b 315deg, #909 315deg, #909 360deg );
div{ width:200px; height:200px; border-radius:50%; background:conic-gradient( #fc0 0, #fc0 45deg, #59f 45deg ); }
background:repeating-conic-gradient( #f00 0, #f00 15deg, #fa0 15deg, #fa0 30deg );
