浏览器对 CSS3 线性渐变的支持

缘起 firefox 16 的更新，导致先前写的渐变样式失效。于是对 css3 渐变重新学习和整理。再做下总结。

CSS3 线性渐变原理

其实用过 Photoshop 的话，应该很容易理解。就是将多种色彩从在一个角度上从一个地方开始描绘到另外一个截止的地方。形象地描绘如下图：

css3渐变原理

W3C语法

标准的语法如下：

linear-gradient(
    [ <angle> | to <side-or-corner> ,]? 
    <color-stop> [, <color-stop>]+ 
)

angle：线性渐变的角度
side-or-corner：从边缘或者角落进行渐变，支持左右（left，right）或者上下（top，bottom）
color-stop：色彩的颜色，位置(0% - 100%)，和长度

WebKit 内核的支持

较早（2008年）的时候，Webkit 对 CSS3 线性渐变的支持语法如下:

-webkit-gradient(
    <type>, 
    <point> [, <radius>]?, 
    <point> [, <radius>]? 
    [, <stop>]*
)

区别于 W3C 的一个标志就是需要定义 type。

2011年的时候，Webkit 对 CSS3 渐变的方法做了优化，将 -webkit-gradient 拆分为 -webkit-linear-gradient 和 -webkit-radial-gradient，和 W3C 标准又近了一步。

Gecko 内核的支持

09 年的时候，firefox 对 CSS3 线性渐变的支持语法如下：

-moz-linear-gradient(
    [ [ [top | bottom] || [left | right] ],]? 
    <color-stop>[, <color-stop>]+
)

最近，firefox 升级到 16 版本，对 linear-gradient 样式的支持也有了变化。对角度的变化支持 W3C 标准，但有点区别就在于角度的to：

linear-gradient(
    [ [ [ <angle> | to [top | bottom] || [left | right] ],]? 
    <color-stop>[, <color-stop>]+
)

浏览器的兼容性

特点	Firefox(Gecko)	Chrome	IE	Opera	Safari
基础支持渐变背景	3.6 16.0 W3C	10.0	10.0	11.1	5.1
其他元素	不支持	支持	-	-	支持
没有`to`	3.6	10.0	10.0	11.1	5.1
标准支持	16.0	不支持	10.0	12.10	不支持

可见，从 16 版本开始，firefox 开始支持 linear-gradient 语法。于是，原先的问题代码（没有加to）就出现问题了。所有的角度需要 +90deg 才能达到预想的效果。而实际上加个to也行。

跨浏览器线性渐变

恩，最后给出跨浏览器线性渐变的代码，如下：

.grad { 
  background-color: #F07575; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Fx 3.6 to Fx 15 */
  background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For IE 10 Platform Previews and Consumer Preview */
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Opera 11.1 to 12.0 */
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be the last statement */
}

参考文章：linear-gradient和CSS3 Linear Gradients

掌心