css渐变效果，兼容所有主流浏览器

最新推荐文章于 2021-08-04 01:05:53 发布

fants

最新推荐文章于 2021-08-04 01:05:53 发布

阅读量1.4k

点赞数 1

分类专栏： css 渐变滤镜 ie渐变文章标签： css safari ie firefox opera 浏览器

本文链接：https://blog.csdn.net/fan476767883/article/details/7352441

版权

css 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

渐变

1 篇文章 0 订阅

订阅专栏

滤镜

1 篇文章 0 订阅

订阅专栏

前端时间要做一个渐变背景，本来是用图片，但是高度不固定，图片不能完美解决。最后综合网络上流传的一些方法。

用以下css代码做了渐变。以下浏览器测试通过，ie5，ie6，ie7，ie8，ie9，ie10，firefox，chrome，opera，safari。呵呵，够全面把。ie系列是在ietest里面测试的。ie10是win7预览版的。

代码如下

.gradient {
	background: #ededed;   /*不能渐变的浏览器*/
	filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ededed,endcolorstr=white, gradientType=0 );  /*IE*/
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ededed,endcolorstr=white, gradientType=0 ); /*IE8*/
	background: -o-linear-gradient(top, #ededed 0%, white 30%);  /*opera*/
	background: -moz-linear-gradient(top, #ededed, white 25%);   /*firefox*/
	background: -webkit-gradient(linear, 0 0, 0 200, from(#ededed),to(white) ); /*chrome, safari*/
}