愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

深入理解 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-sizebackground-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%这样的一个渐变色节点列表,其各个渐变色节点所落在的位置分别是渐变线上的20px50px100px处。图形渲染时,就将根据颜色位置信息,来进行渐变的渲染


三、渐变细节

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%之间的redorange没有指定位置参数,因此,redorange会平均分配30%的长度空间,即15%的段长度,因此相当于red 0%orange 15%
  • 由于30% ~ 100%之间的redblack没有指定位置参数,因此,redblack会平均分配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%)

那么,结合节点位置的自动分配的原则,redblue之间的剩余空间为0%,所以orangeyellow都将被忽略。从而实际上等同于:

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


四、参考资料