在不同浏览器（除Opera）下的，背景渐变的CSS实现

这里我自己写了一个demo CSS：

/* 背景颜色渐变 */ .gradient-top{ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ADD8E6", endColorStr="#FFFFFF", gradientType="0");/* for IE */ *height: 100%; background: -moz-linear-gradient(top, lightblue, white 100%); /* for FF */ background: -webkit-gradient(linear, 0 0, 0 100%, from(lightblue), to(white));/* for Safari and chrome */ } /* 综合了一下效果，在IE上用水平渐变，其他浏览器依旧用垂直渐变 */ .gradient-tl{ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#EFEFEF", endColorStr="#FFFFFF", gradientType="1");/* for IE */ *height: 100%; background: -moz-linear-gradient(top, #E0DFE0, white 10%); /* for FF */ background: -webkit-gradient(linear, 0 0, 0 10%, from(#E0DFE0), to(white));/* for Safari and chrome */ } .gradient-left{ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#EFEFEF", endColorStr="#FFFFFF", gradientType="1");/* for IE */ *height: 100%; background: -moz-linear-gradient(left, #E0DFE0, white 10%); /* for FF */ background: -webkit-gradient(linear, 0 1, 10% 0, from(#E0DFE0), to(white));/* for Safari and chrome */ } 

具体的你可以参考：http://css3html5.org/css/css3/2010/0622/124.html

上面的height是为了解决IE6&7下没有设置高度时不能显示的问题。

以上是垂直渐变的写法，当然，还有一个扩散性的写法：就是把linear变成radial。

不过现在对于webkit内核的浏览器又出了新的写法（这种写法跟火狐是类似的）：

//垂直渐变 background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */ //放射渐变 background:-webkit-radial-gradient(10% 30%, white, black);/*new gradient for webkit */