zoukankan      html  css  js  c++  java
  • (转)css 背景色渐变兼容写法

    css3:linear-gradient

    比如:黑色渐变到白色,代码如下:

    复制代码
    .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%);
    }
    复制代码

    说明:linear-gradient 具体用法点此进入

    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;}
    复制代码

    PS:

    在实际的项目中,往往会碰到圆角和渐变的组合,如果使用上面的写法,那么在 ie9 下会有 bug(在 ie9 下背景色不能完全切完),解决方法是SVG,具体点此查看

  • 相关阅读:
    wpf 3D学习
    vs2010莫名崩溃初探
    Wcf(,service callback client)
    MEF和CompositionContainer学习
    认知Media Queries让浏览器人性化
    移动互联网产品设计的7大误区
    RUP中的迭代模型
    前端工程师的价值体现在哪里?
    做用户研究时,如何挑选合适的用户?
    晒晒 邀请函!感恩节 感谢组织!让我挡上末班车!哈哈!
  • 原文地址:https://www.cnblogs.com/Wu-W-Sen/p/4534217.html
Copyright © 2011-2022 走看看