日期:2014-05-17  浏览次数:20867 次

理解CSS3线性渐变
Webkit
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)  

例:
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); 

渐变的类型  (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色 (from(red))
结束的颜色 (to(blue))

Mozilla
Firefox,从3.6版本才开始支持渐变,更喜欢和Webkit略微不同的语法。
 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )   
  
background: -moz-linear-gradient(top, red, blue);  


请注意我们将渐变的类型——linear——放到了属性前缀中了
渐变从哪里开始 (top – 我们也可以使用度数,比如-45deg)
开始的颜色 (red)
结束的颜色 (blue)
background: white; /* fallback for older/unsupporting browsers */  
background: -moz-linear-gradient(top, #dedede, white 8%);   
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));   
border-top: 1px solid white; 


如果我们想要添加多一种(几种)颜色,我们可以这样做:
background: white; /* fallback for older/unsupporting browsers */  
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);   
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), 
color-stop(8%, white), color-stop(20%, red); 


对于-moz 版本,我们定义,从元素的20%的高度的地方开始是红色。
而对于-webkit,我们使用color-stop,采用两个参数:哪里开始停止,使用哪种颜色。

IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */