• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3的linear-gradient线性渐变的浏览器兼容性

    CSS3的linear-gradient线性渐变的浏览器兼容性

    作者: 分类:HTML5与CSS3.0 点击: 354 次
    wordpress CMS主题:ssmay主题

      兼容性问题一直是让前端工程师脱发的主要罪魁祸首,所以,利用一些神器工具可以挽救你的发际线。

      CSS3的linear-gradient线性渐变的浏览器兼容性

      先来一个兼容性全包括的代码片段,这是IE9不支持圆角的全系列:

      .gradient{
      background: #d91915; /* Old browsers */
      background: -moz-linear-gradient(left, #d91915 0%, #d00e31 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(left, #d91915 0%,#d00e31 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right, #d91915 0%,#d00e31 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d91915', endColorstr='#d00e31',GradientType=1 ); /* IE6-9 */
      }

      逐行分析一下:

      1、不支持渐变的使用第一行设置的背景颜色。

      background: #d91915; /* Old browsers */

      2、老式的火狐浏览器,FF3.6-15,需要加-moz前缀,而且使用当时的老规范。

      有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

      background: -moz-linear-gradient(left, #d91915 0%, #d00e31 100%); /* FF3.6-15 */

      3、老式的谷歌、苹果浏览器,Chrome10-25,Safari5.1-6

      其实老式的语法有两种:

      -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//比较新的老式发布书写语法
      -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

      CSS3的linear-gradient线性渐变的浏览器兼容性

      CSS3的linear-gradient线性渐变的浏览器兼容性

      最老式的语法估计已经没有人用了,所以可以不用写了,如果你非要兼容这些老古董,可以哭着加上。

      background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d91915), color-stop(100%,#d00e31)); /* Chrome4-9,Safari4-5 */
      background: -webkit-linear-gradient(left, #d91915 0%,#d00e31 100%); /* Chrome10-25,Safari5.1-6 */

      这里插个题外话,因为Opera浏览器放弃了自己的内核,投入了chrome谷歌的阵营,所以现在看不到-o这样的前缀了。

      如果还想把老式的Opera浏览器兼容的话,可以再加一段:

      background: -o-linear-gradient(left, #d91915 0%,#d00e31 100%); /* Opera 11.10-11.50 */

      4、标标准准的W3C新时代语法。

      background: linear-gradient(to right, #d91915 0%,#d00e31 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

      5、万恶的IE内核来了。

      IE10以下都不支持,必须依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。如图所示:

      CSS3的linear-gradient线性渐变的浏览器兼容性

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d91915', endColorstr='#d00e31',GradientType=1 ); /* IE6-9 */

      到这里,几乎实现了全支持,但是IE9本来是支持圆角border-radius的,可惜只用filter滤镜不能实现圆角渐变,还必须使用SVG才能全部支持圆角渐变。怎么生成SVG,请用下面的神器。

      还需要为IE9加上如下代码:

      Markup
      <!--[if gte IE 9]>
        <style type="text/css">
          .gradient,.gradient:hover {
             filter: none;
          }
        </style>
      <![endif]-->

      好了,用了以上代码,至少能够保证IE9以上,谷歌,火狐浏览器效果全部一致,IE6/7/8没有圆角的渐变效果。



      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201808226648.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.