ie兼容CSS3渐变写法

在css3之前要想做背景色渐变就只能采用添加背景图片的方法，但是随着css3：linear-gradient属性的出现，就可以避免使用添加背景图片的方法，从而优化了性能。但是inear-gradient属性在ie9以下是无效的，但是可以采用ie滤镜的方法。

 

比如：黑色渐变到白色，代码如下：

 

.gradient{ 
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
} 

  

ie 滤镜：filter 

linear-gradient 在 ie9 以下是不支持的，所以对于 ie6 - ie8 我们可以使用滤镜来解决，代码如下： 

 

.gradient{ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); 
} 

 

由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下：

 

:root {filter:none;} 

 

综上所述，线性渐变的兼容写法如下： 

 

.gradient{ 
background: #000000; 
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); 
} 
:root .gradient{filter:none;} 

 

转载于:https://www.cnblogs.com/wandiao/p/5948303.html