css之渐变

首先，渐变属性是css3中加入的一种显示效果，在webkit核心的浏览器、Opera、Mozilla Fox、ie（ie9+）中的书写方式需要分别标识出来，不然影响正常的显示效果。

gradient分为linear-gradient（线性渐变）和radial-gradient（径向渐变）。

1.linear-gradient([方向（角度）],[颜色],..[])

默认方向为自顶向下，若要从左至右则如下：

.test{
     background:linear-gradient(to right,red,blue,green,orange);/*标准语法的从左至右的渐变*/
     background:-webkit-radial-gradient(left,red,blue,green,orange);/*chrome、safari等webkit核心的浏览器*/
     background:-moz-radial-gradient(left,red,blue,green,orange);/*Mozilla Fox浏览器*/
     background:-o-linear-gradient(left,red,blue,green,orange);/*Opera浏览器*/
}

角度写法示例为：45deg

2.radial-gradient([形状],[中心位置],..[颜色])

默认形状为circle（圆形），也可以为ellipse（椭圆）；默认中心位置为元素中心，可设置为bottom left center（默认） 等等

不同浏览器的语法如下：

.test{
     background:linear-gradient(bottom right,red 5%,blue 15%,green 25%,orange 35%);/*标准语法的以左下角为中心的径向渐变*/
     background:-webkit-radial-gradient(bottom right,red 5%,blue 15%,green 25%,orange 35%);/*chrome、safari等webkit核心的浏览器*/
     background:-moz-radial-gradient(bottom right,red 5%,blue 15%,green 25%,orange 35%);/*Mozilla Fox浏览器*/
     background:-o-linear-gradient(bottom right,red 5%,blue 15%,green 25%,orange 35%);/*Opera浏览器*/
}

以上~