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

最新推荐文章于 2025-02-19 21:40:47 发布

原创最新推荐文章于 2025-02-19 21:40:47 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #opera #css #safari #webkit #chrome

CSS 专栏收录该内容

35 篇文章

订阅专栏

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

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