线性渐变：
background-image: linear-gradient(90deg,blue,red 10%,yellow 20%,pink 30%,gray 40%)；
第一个参数是角度：
to right, to bottom right, 角度
第二个参数开始：
后面可以写多个颜色参数(至少两个)，渐变颜色过程，其中第二颜色开始后面如果写对应的百分比，则表示从起点开始到这个颜色开始所占总渐变的百分比，当到最后一个颜色为100%填补渐变所有颜色，同时可以让颜色有侧重点。每一个颜色的开始百分比要比上一个颜色的开始百分比大，否则没有渐变。
重复的线性渐变：
background-image: repeating-linear-gradient(90deg,blue,red 10%,yellow 20%,pink 30%,gray 40%);
和线性渐变类似，但是会有重复色块
径向渐变：
background-image: radial-gradient(ellipse 100px 100px at 0 100px ,red 20%, yellow 40%, green 100%)；
background-image: radial-gradient(circle 100px at 0% 50%,red, yellow, green)；
第一个参数：
形状（ellipse/circle），椭圆的宽高/圆的半径(定义圆的半径或者椭圆的轴长度，有三种情形。第一种情形是使用进行声明，默认为farthest-corner；第二种情形是当shape为circle时，通过使用px等长度单位来声明径向渐变圆的半径；第三种情形是当shape为ellipse时，通过使用两个长度单位来分别声明径向渐变椭圆的长半轴和短半轴。)，距离原点的位置（左上角是x轴0，y轴为0的原点，可以用百分比，也可以用px）
第二个参数以后：
颜色和线性渐变类似
重复径向渐变：
background-image: repeating-radial-gradient(circle 50px at 0% 50%,red, yellow, green)；
角向渐变：
conic-gradient(#f1462c 0 12.5%, #fba73e 12.5% 25%, #e0fa4e 25% 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);
