CSS实现渐变 兼容各主流浏览器

某些情况下，渐变是不需要切图的，也许还有新手不知道。这篇文章来讲一下用CSS实现线性渐变，并且兼容IE6等等。

什么情况下需要CSS实现渐变？

用CSS代替背景图片就不用说了。比如这个表单下的背景，它是#ffffff 到#eeeeee 的线性渐变。如图：

某些时候用户可能会把它操作成这样：

或者说这是一个可变高的布局。这时候用CSS实现这种线性渐变是最理想的。

具体代码如下：

1 .gradual_ff_f2 {
2     filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#eeeeee,gradientType=0);
3     background:-moz-linear-gradient(top, #ffffff, #eeeeee);
4     background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eeeeee));
5     background:-o-linear-gradient(top, #ffffff, #eeeeee);
6         /*不可缩写，如#ffffff不能缩写成#fff,原因有待考究*/
7 }

此方法只适用于单纯的线性渐变，并不支持PS里面的各种渐变（如圆形渐变），当然前提是兼容各大浏览器，尤其是IE系列。大家可在适用的情况下使用。

转载于:https://www.cnblogs.com/qianduanzu/archive/2012/04/13/2445568.html