首页>前端教程>CSS教程

linear-gradient线性渐变的兼容性问题,有神器!

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

脱发表情包.jpg

先来一个兼容性全包括的代码片段,这是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>]*) //老式语法书写规则

老式的线性渐变语法

老式的线性渐变语法

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

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表示水平渐变。如图所示:

线性渐变filter语法

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

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

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

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

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

看了那么多代码,是不是感觉手写好心塞,手累,心更累,于是,聪明的人类都用了自动生成渐变代码的神器:

http://www.colorzilla.com/gradient-editor/

如图:

自动生成全兼容的渐变神器工具.jpg

如果需要兼容IE9或者最全面的兼容的话,只需要勾上这两个选项即可,是不是超方便。

自动生成全兼容的渐变神器工具1.jpg

好了,我要去p图我的发际线了。

脱发表情包1.jpg

点赞


3
保存到:

相关文章

Top