渐变效果也是常用的效果之一，因为浏览器兼容性的原因，很多人都是用背景图片来达到渐变效果的，其实仅仅使用 CSS 就可以实现了。
.gradient {
/* Firefox 3.6 */
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1);
/* Safari & Chrome */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb));
/* IE6 & IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";
}
缺点
1. 不能通过W3C的验证
2. 必须给不同类型的浏览器编写不同的CSS
3. IE8需要单独的，与IE6，7不同的CSS
From: http://www.fogtowerblog.com/web/css-solutions-for-cross-browsers-part2.html