gradient渐变属性设置

css渐变是[img]类型的一直特殊表现，渐变可以在任何使用 <image> 的地方使用；

常用的渐变有
（1）linear-gradient()线性渐变
（2）radial-gradient()径向渐变
（3）conic-gradient()(大部分浏览器站不支持)梯度渐变；
（4）repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()，这个就不用解释了吧；

linear-gradient()：线性渐变

基础语法：linear-gradient( angle, start-color position, end-color position);
参数设置：
start-color 是渐变的初始颜色
end-color 是结束的颜色，这些颜色统称为色标
angle 是渐变的角度，可以是具体的角度（45deg），也可以是 to + 方向（to bottom right）
position 是具体位置，可以使用px,百分比，建议使用百分比；

repeating-linear-gradient()与linear-gradient用法相同；
例如：

 .linear1{
            background: linear-gradient(to top right, #ddd, #999 60%, #666 90%, #333)
        }
.linear2{
            background: linear-gradient(90deg, #ddd, #999 50px, #666 100px, #333)
        }
.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 20px, blue 20px, blue 40px);
}

radial-gradient()：线性渐变

语法：radial-gradient(shape rx ry at position, start-color, end-color )

参数设置：
shape：形状(ellipse - 椭圆 (默认值)、circle - 正圆)
rx,ry半径大小：rx(x轴半径),ry（y轴半径）,也可以使用关键词表示closest-side（圆形到最近的边的距离）、closest-corner（圆形到最近的角的距离）、farthest-side（圆形到最远变的距离）、farthest-corner（圆形到最远角的距离）
positon圆心位置:at x y或是at bottom right ,也可以使用px,百分比
color:色值
例如：

#div5 {
            background: radial-gradient(red 5%, green 15%, blue 60%);
            color: #ffffff;
            font-size: 30px;
        }
        .box{
            background: radial-gradient(at 0 50%,red,blue,yellow 80%)
        }
        .ellipse{
            background: -webkit-radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
            background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
        }

repeating-radial-gradient()用法同上；

conic-gradient()：梯度渐变

基础语法：conic-gradient(from angle at position ,color1 angle,color2 angle,color3 angle)
常用参数：form以角度为值，定义梯度旋转;position以坐标x,y位置，定义圆形位置
同比可以使用repeating-conic-gradient();
暂时只有chorm69，opear,safari,android webview支持该属性