css 颜色渐变兼容性

旧城等待， 2021-12-16 15:41 369阅读 0赞

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

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

目标：

![1187728-20190430113057200-1725807515.png][]

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

谷歌、火狐、欧朋（都是新版）可以兼容

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开始位置，其他都都是结束位置

这样就可以兼容了。

转载于:https://www.cnblogs.com/xingyue525/p/10795439.html

[1187728-20190430113057200-1725807515.png]: /images/20211214/6fa4f17679684398b2dc0f6bbafcf46e.png