当前位置： 移动技术网 > IT编程>网页制作>CSS > css 颜色渐变 兼容性

css 颜色渐变 兼容性

2019年05月01日  | 移动技术网IT编程  | 我要评论

参考文献：http://caibaojian.com/css3-background-gradient.html

　　　　   https://www.cnblogs.com/xzzzys/p/7495725.html

 

目标：

一开始用 background: linear-gradient(to right, #000,#fff)  :

谷歌、360极速模式、火狐、欧朋（都是新版）可以兼容

ie9  不可以兼容

所以为了ie或其他较低版本浏览器兼容：

.gradient{

　　width: 973px;
　　height: 100%;
　　background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* 兼容safari4-5, chrome1-9 */
　　background: -moz-linear-gradient(right, #000000 0%, #ffffff 100%); /* firefox */
　　background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* chrome */
　　background: -o-linear-gradient(right, #000000 0%,#ffffff 100%); /* opera */
　　background: -ms-linear-gradient(right, #000000 0%,#ffffff 100%); /* ie */
　　background: linear-gradient(to right, #000000,#ffffff); /* firefox */
　　-ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#000000', endcolorstr='#ffffff',gradienttype=1)"; /* 兼容ie8~ie9 */
　　filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#000000', endcolorstr='#ffffff',gradienttype=1 ); /* 兼容ie5~ie9 */
}

注意：

1、filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#000000', endcolorstr='#ffffff',gradienttype=1 ); 中 gradienttype=1 代表水平 ， gradienttype=0 代表从上往下（默认从上往下）

　　还要特别值得注意的是 startcolorstr='#000000' 中的 16进制颜色 不能简写 为 #000 ，不然也不会识别达到效果

2、background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%);  中  left开始位置，其他都都是结束位置

这样就可以兼容了。

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网