漸變效果也是常用的效果之一，因為瀏覽器兼容性的原因，很多人都是用背景圖片來達(dá)到漸變效果的，其實僅僅使用 CSS 就可以實現(xiàn)了。
.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需要單獨(dú)的，與IE6，7不同的CSS
From: http://www.fogtowerblog.com/web/css-solutions-for-cross-browsers-part2.html