CSS 跨浏览器解决方案之二梯度

梯度效果也是常用的效果之一，因为浏览器兼容性的原因，很多人都是用背景图片来达到梯度效果的，其实仅仅使用 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

效果请看这里