CSS3线性渐变简单总结

　　线性渐变我是在2011年就接触过，当时写法比较麻烦，from(),to()，当时学的时候，看起来比较难记忆，现在再次看的时候发现推出了新的写法，比老式写法简单多了，容易记忆了好多，就来总结下吧！

　　

CSS3 线性渐变注意地方

 

1 使用新式写法 

     -前缀-linear-gradient( [point | angle] ?,stop,stop,[stop]*?)

     

      不写point和angle时， 默认为top

　　

　　point可选值为top,left，

 

　　point和angle只能出现一个，颜色值可以无限写下去。

 

      其中left值相当于0deg,top相当于270deg. 也就是按照顺时针旋转的。

 

2 注意IE线性渐变实现，采用fliter方法实现

     

 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/

 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

 

3 梯度变化，即带有不同的长度值，将百分比写在每个颜色值后面以空格隔开。默认为平分。

 

4 透明度，颜色值使用rgba实现即可。

 

5 角度问题，单位使用deg。

 

　顺时针旋转，可以使用负值，但不建议。