CSS3技巧 —— 渐变

CSS渐变在Webkit率先得到实现，现在Firefox 3.6+也支持了，来看下各个浏览器如何实现CSS渐变效果。

Webkit

下面这行代码可用于Chrome, Safari等，它能实现线性渐变，从top(#ccc)渐变到bottom(#000)。

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

IE

IE这个垃圾需要使用滤镜

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

跨浏览器的渐变代码

把上面三行代码合在一起就是一段跨浏览器的渐变代码。注意：我在开头加了一个background，以防用户使用的浏览器不支持这些特性。

background: #999; /* for non-css3 browsers */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */ 

IE的限制

IE的渐变滤镜不支持 color-stop，gradient angle，radial gradient。也就是说你只能实现水平或垂直的渐变，渐变色也只有2种：StartColorStr 和 EndColorStr。

最后的温馨提示

不是所有浏览器都支持CSS渐变。为了保险起见，你最好不要依赖它，只能把它当作加分的东西。如果你像我玩博客一样，面向的都是Chrome，Firefox，往死里用吧！