zoukankan      html  css  js  c++  java
  • 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;} 
  • 相关阅读:
    又学到的2个小技巧
    CSS3 简写animation
    CSS3 区别Transform,Transition,Animation一句话
    纠错【2012年5月9日 JQuery跑马灯(文字无缝向上翻动)(自已封装的第三个插件)】
    jQuery计算选中的文本字数,并弹出一个层(插件四)
    html5Canvas绘制线条closePath();
    html5循环方式绘制矩形
    jQuery过滤not()与filter();
    javascript在firebug调试时用console.log
    jQuery插件在光标定位的地方插入文字(插件5)
  • 原文地址:https://www.cnblogs.com/wandiao/p/5948303.html
Copyright © 2011-2022 走看看