了解CSS3线性渐变

理解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 */ 

查看更多 下一篇