蓁祎家进步中

# 深入理解 linear-gradient()

返回：css 属性系统学习

语法

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

  • 当第一个参数未指定时，其默认值是to bottom。
  • <side-or-corner>,其单位取值可以是和角度有关的deg（角度）、rad（弧度）、grad（梯度）和turn（圈数）

# 渐变容器

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

12058476-891cc0940fb654ec.png

# 渐变线

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

12058476-17ff8e518af98079.png

# 渐变角

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

# 线性渐变的角度增强

1120111-88d61a4e5b195ae5.png

# 渐变线长度

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

abs(W * sin(A)) + abs(H * cos(A));
// 其中，W是渐变容器的宽，H是渐变容器的高，A是渐变角
1
2

# 渐变色节点

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

12058476-d34b7d28ea1fc7ab.png

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

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

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

# 可重合的渐变节点

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

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

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

# 节点位置的自动分配

在渐变色节点中，位置参数是可以缺省的。那么在缺省的情况下，会怎样决定位置参数呢？
节点位置会根据前一个确定的位置和后一个确定的位置，和中间节点总数，进行平均分配。如以下例子：

background-image: linear-gradient(100deg, red, orange, yellow 30%, red, black);
1

12058476-e37fa60239ad8d50.png

可以看到，确定的位置，就只有隐含的 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%

因此自动适配后：

background-image: linear-gradient(100deg, red, orange, yellow 30%, red, black) linear-gradient(
    100deg,
    red 0%,
    orange 15%,
    yellow 30%,
    red 65%,
    black 100%
  );
1
2
3
4
5
6
7
8

# 节点位置是单调递增的

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

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

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