web之线性渐变，径向渐变，重复渐变
渐变能做很多炫丽的效果，减少图片的使用，有很强的适用性与扩展性。
1.线性渐变
线性渐变是指一个颜色从一个方向向另一个颜色变化，相当于从任意角度向任意角度变化（角度之间必须相差180°）。
background:linear-gradient(to left,red,blue,black)
从右到左先红，再慢慢变蓝，再慢慢变黑
2.径向渐变
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);
起始点与最近一端为圆的尺寸
3.重复渐变
线性重复渐变：
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);