深入理解 linear-gradient()

相信大家都用过linear-gradient这个CSS3带来的特性，用来实现线性渐变效果。我们都知道它的语法是：

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

其中，当第一个参数未指定时，其默认值是to bottom。而对于<side-or-corner>，其单位取值可以是和角度有关的deg（角度）、rad（弧度）、grad（梯度）和turn（圈数）
所以，我们要实现一个从上到下，从白渐变到黑的背景，其实只要写：

.some-element {
    background: linear-gradient(to bottom, #FFF 0%, #000 100%);
}

不过如果是这样子的话，就没啥特别的了。linear-gradient的应用也不仅仅局限于此，你可能看过以下这些样式效果：

PS软件中表征透明背景的格子背景

漂亮的进度条

以上这些样式都可以用纯CSS所实现，而起到关键作用的，便是linear-gradient了。而本文将深挖linear-gradient的细节，让你在使用这个特性时，更成竹在胸。

二、关键参数

1、渐变容器

所谓渐变容器，便是容纳渐变图案的填充范围。它可以通过background-size和background-position来指定。如下图所示：

2、渐变线

穿过容器中心点、颜色停止点的线，称为渐变线，如下图所示：

3、渐变角

穿过容器中心点的垂直线和渐变线之间的夹角，称为渐变角，如下图所示：

4、渐变线长度

需要注意的是，渐变线是一条线段，而非一条直线，因此它的长度是有限的。而渐变线的长度也是可求的，我们可以通过几何关系，计算出渐变线的长度为：

abs(W * sin(A)) + abs(H * cos(A))

其中，W是渐变容器的宽，H是渐变容器的高，A是渐变角

5、渐变色节点

我们通过linear-gradient的语法，所定义的<color-stop-list>中的每一个成员其实就是渐变色节点，如下图所示：

每个渐变色节点的语法是：

<color> [<percentage> | <length>]?

也就是说它是由颜色和位置参数所决定的，而这个位置参数可以是百分比也可以是长度数值，位置参数是相对于渐变线的。比如渐变线长度是100px，那么对于#000 20%, #CCC 50px, #DDD 100%这样的一个渐变色节点列表，其各个渐变色节点所落在的位置分别是渐变线上的20px、50px、100px处。图形渲染时，就将根据颜色和位置信息，来进行渐变的渲染

三、渐变细节

1、可重合的渐变节点

渐变线上可以添加多个渐变节点，并且这些渐变节点是允许重合的，那么当渐变节点重合时，会发生什么状况呢？

答案是： 会形成清晰的分界

linear-gradient(to bottom, #36C 0%, #36C 50%, #F00 50%, #F00 100%)

它的效果将是：

2、节点位置的自动分配

在渐变色节点中，位置参数是可以缺省的。那么在缺省的情况下，会怎样决定位置参数呢？

节点位置会根据前一个确定的位置和后一个确定的位置，和中间节点总数，进行平均分配。如以下例子：

linear-gradient(100deg, red, orange, yellow 30%, red, black)

可以看到，确定的位置，就只有隐含的0%、100%和指定的30%，因此，会进行如下的计算：

• 由于0% ~ 30%之间的red、orange没有指定位置参数，因此，red和orange会平均分配30%的长度空间，即15%的段长度，因此相当于red 0%和orange 15%
• 由于30% ~ 100%之间的red、black没有指定位置参数，因此，red和black会平均分配70%的长度空间，即35%的段长度，因此加上位置偏移量30%，相当于red 65%和black 100%

因此经过自动分配过后，相当于：

linear-gradient(100deg, red 0%, orange 15%, yellow 30%, red 65%, black 100%)

3、节点位置是单调递增的

我们写节点位置时，是可以随意写而不考虑大小关系的，但其实节点位置应该符合单调递增的关系。所以浏览器会自动进行纠正。其纠正逻辑为：

不正确的位置，会被纠正为与之前的明确指定的位置相同

因此对于例子：

linear-gradient(80deg, red 30%, orange, yellow, blue 10%)

其呈现效果为：

分析如下：由于10%显然小于30%，所以10%被纠正为30%，形成了：

linear-gradient(80deg, red 30%, orange, yellow, blue 30%)

那么，结合节点位置的自动分配的原则，red和blue之间的剩余空间为0%，所以orange、yellow都将被忽略。从而实际上等同于：

linear-gradient(80deg, red 30%, blue 30%)

四、参考资料