这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天
web之线性渐变，径向渐变，重复渐变
渐变能做很多炫丽的效果，减少图片的使用，有很强的适用性与扩展性。
线性渐变
线性渐变是指一个颜色从一个方向向另一个颜色变化，相当于从任意角度向任意角度变化（角度之间必须相差180°）。 background:linear-gradient(to left,red,blue,black) 从右到左先红，再慢慢变蓝，再慢慢变黑
径向渐变
border: solid 1px #ccc; width: 300px; height: 300px; background: radial-gradient(red,yellow,rgba(12,22,33,0.2)); 此处：圆三色标之间是等距的
border: solid 1px #ccc;
width: 100px;
height: 300px;
background: radial-gradient(ellipse closest-side,red,yellow 10%,#1E90FF 50%,white);
椭圆是使用最近端的值，从开始点到最近端来规定椭圆的尺寸
border: solid 1px #ccc; width: 100px; height: 300px; background: radial-gradient(ellipse farthest-corner,red,yellow 10%,black 50%,white); 椭圆渐变的尺寸为盒模型中心到最远端的距离
border: solid 1px #ccc; width: 100px; height: 300px; background: radial-gradient(circle closest-side,red,yellow 10%,black,white); 起始点与最近一端为圆的尺寸
重复渐变
线性重复渐变： width: 300px; height: 300px; border: 1px solid #ccc; background: repeating-linear-gradient(-45deg, red 0px, red 10px, white 10px, white 20px); 从135deg指向-45deg red到red为10px white到white为10px的宽度，如此重复。
圆形重复渐变： width: 300px; height: 300px; border: solid 1px #ccc; background: repeating-radial-gradient(red,red 10px,white 10px,white 20px);
