一、开言
相信大家都用过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的应用也不仅仅局限于此，你可能看过以下这些样式效果：
image
PS软件中表征透明背景的格子背景
image
漂亮的进度条
以上这些样式都可以用纯CSS所实现，而起到关键作用的，便是linear-gradient了。而本文将深挖linear-gradient的细节，让你在使用这个特性时，更成竹在胸。
二、关键参数
1、渐变容器
所谓渐变容器，便是容纳渐变图案的填充范围。它可以通过background-size和background-position来指定。如下图所示：
image
2、渐变线
穿过容器中心点、颜色停止点的线，称为渐变线，如下图所示：
image
3、渐变角
穿过容器中心点的垂直线和渐变线之间的夹角，称为渐变角，如下图所示：
image
线性渐变的角度增强
image
4、渐变线长度
需要注意的是，渐变线是一条线段，而非一条直线，因此它的长度是有限的。而渐变线的长度也是可求的，我们可以通过几何关系，计算出渐变线的长度为：
abs(W * sin(A)) + abs(H * cos(A))
其中，W是渐变容器的宽，H是渐变容器的高，A是渐变角
5、渐变色节点
我们通过linear-gradient的语法，所定义的<color-stop-list>中的每一个成员其实就是渐变色节点，如下图所示：
image
每个渐变色节点的语法是：
<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%)
它的效果将是：
image
2、节点位置的自动分配
在渐变色节点中，位置参数是可以缺省的。那么在缺省的情况下，会怎样决定位置参数呢？
image
节点位置会根据前一个确定的位置和后一个确定的位置，和中间节点总数，进行平均分配。如以下例子：
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%)
其呈现效果为：
image
分析如下：由于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%)
网友评论