在不同浏览器（除Opera）下的，背景渐变的CSS实现-优快云博客

本文介绍如何使用 CSS3 实现不同类型的渐变效果，包括垂直、水平及放射状渐变。文中提供了针对不同浏览器的兼容性写法，如 IE、Firefox 和 Webkit 浏览器，并解释了为何某些特定属性对于兼容性至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里我自己写了一个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内核的浏览器又出了新的写法（这种写法跟火狐是类似的）：