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

来源:互联网 发布:java 64位整型 编辑:程序博客网 时间:2024/04/29 01:19

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

用以下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*/}


原创粉丝点击