web之线性渐变，径向渐变，重复渐变

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);
椭圆是使用最近端的值，从开始点到最近端来规定椭圆的尺寸