CSS渐变色

发表于 2020-01-30 分类于笔记

前言

CSS渐变色实际上是一种特殊的<iamge>类型，因此可以被用在任何可以使用<image>类型数据的属性中！而在CSS中，渐变有分为以下几种：

线性渐变：对应linear-gradient()函数。
径向渐变：对应radial-gradient()函数。
圆锥渐变：对应conic-gradient()函数。
重复渐变：对应repeating-linear-gradient()和repeating-radial-gradient()函数。

渐变色的特点就是沿着某一方向，从一种颜色逐渐变化到另一种颜色（两种或两种以上颜色）；关键就在于渐变颜色个数、对应的位置，空间上是如何变化的。

线性渐变

原理

线性渐变有两个关键因素：

渐变方向
渐变点：包括点的位置和颜色。

20200130134953

上图是MDN^[1]给出的线性渐变完整定义图，可以看出由起点和终点来决定渐变的方向，然后渐变点位于起点和终点之间。

渐变方向

linear-gradient()有关渐变方向的设置并不像定义中的那样给定起点和终点位置，而是通过旋转角度来确定；默认旋转中心是区域中心点，从底部往上的方向为0deg方向，顺时针增加角度，然后再确定起点和终点的位置。

起点：通过区域左上角与渐变线做一条垂线，垂线与渐变线的交点就是起点。
终点：同理，通过区域右下角与渐变线做一条垂线，垂线与渐变线的交点就是终点。

(可以考虑做个动图，从0~360)

函数的第一个参数可以设置渐变方向（也就是旋转角度），可以不填，默认为从上往下（也就是180deg）；有以下几种设置语法：

弧度值：数字 + deg；或者数字 + turn，turn代表一圈，也就是1trun = 360deg。
关键字：to + top/right/bottom/left（或者组合）；即指定终点方向。进一步可以推出：
- to top = 0deg
- to right = 90deg
- to bottom = 180deg
- to left = 270deg
- to top right = 左下到右上（注意并不一定是45deg）

渐变点

渐变点的信息主要有：

位置：渐变点位于渐变线（轴）上的位置；可以是<length>类型数据或者%，百分比相对于渐变线的长度而言。
1
2
3
4
5
.demo {
width: 200px;
height: 50px;
background: linear-gradient(90deg, black, red 10%, blue 100px, black);
}
颜色：渐变点的颜色，用于进行渐变色的插值。
渐变中点位置：即两个渐变颜色的中间颜色处于两个渐变点之间的位置；单位为%，百分比相对于两个渐变点之间的长度。默认值为50%，即两个渐变点的中点上。
1
2
3
4
5
6
.demo1 {
background: linear-gradient(90deg, red, blue);
}
.demo1 {
background: linear-gradient(90deg, red, 30%, blue);
}
如上图所示，渐变中点位置50%和30%的效果完全不一样，渐变中点的位置有种『重心』的感觉，因此改变渐变中点的位置可以使得两个渐变点之间的渐变偏向某一侧。

而在linear-gradient()函数中，渐变点信息的设置语法如下：

1	color[ position]

位置可以不设置，此时渐变点的位置就等于前一个渐变点及后一个渐变点的中点位置；如：

.a {
    background: linear-gradient(90deg, white, red, green, blue, black);
}

/* 等同于 */

.a {
    background: linear-gradient(90deg, white 0%, red 25%, green 50%, blue 75%, black 100%);
}

设置位置时，位置与颜色值之间用空格分开；如果连续两个渐变点的颜色都是一样的时候，可以将两个位置信息进行合并，如：

.demo {
    background: linear-gradient(90deg, black, red 40%, red 60%, black);
}

/* 等同于 */

.demo {
    background: linear-gradient(90deg, black, red 40% 60%, black);
}

20200130135110

除此之外，如果第一个渐变点没有指定位置，则默认位置为0%；同理，如果最后一个渐变点没有指定位置，则默认位置为100%。不过，即便是第一个和最后一个渐变点设置了位置信息（不是0%和100%的时候），也会默认在第一个渐变点增加一个颜色值相同且位置为0%的渐变点，最后一个渐变点也同样，如：

.demo {
    background: linear-gradient(90deg, red 20%, blue 80%);
}

/* 等同于 */

.demo {
    background: linear-gradient(90deg, red 0%, red 20%, blue 80%, blue 100%);
}

20200130135128

By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop. ^[1:1]

由渐变的特点可知，至少需要两个渐变点信息，渐变点之间用英文逗号分隔！而渐变中点则需要设置在两个渐变点的信息之间，如：

1	A_color A_position, xx%, B_color B_position

硬分界线（hard line）

当一个渐变点的位置和下一个渐变点的位置相同时（两个渐变点颜色不同），就会出现一条很明显的颜色分界线，此时就没有渐变的特点了，如：

1
2
3

.demo {
    background: linear-gradient(90deg, red 50%, blue 50%);
}

20200130135155

利用这种特性可以画出具有不同色块的渐变图案，如：

1
2
3

.demo {
    background: linear-gradient(90deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}

20200130135216

径向渐变

原理

径向渐变的原理同线性渐变的原理类似，只不过径向渐变的渐变方向是由中心点往外扩散的径向方向上。

20200130135229

径向渐变通过定义一个中心点，以及结束形状（ending shape，即各个径向方向的终点组成的闭合曲线），这个结束形状可以是椭圆或圆；然后由中心点往结束形状上任意一点就形成了一个径向，也就是一个渐变方向，这个方向也叫虚拟渐变射线（virtual gradient）；同样地，中心点的位置为0%，而结束形状上面的点的位置则为100%；

明白了径向渐变的原理后，实际上渐变点的设置跟线性渐变的设置是一样的，区别就在于中心点及结束形状的设置。

中心点

中心点的范围在区域内，可以使用%（百分比相对的是区域的宽高），也可以直接使用<length>类型的数据，可以在radial-gradient()函数中的第一个参数进行设置，不设置时默认为50% 50%（即区域中心位置），设置语法如下：

radial-gradient(at x y, …);

如：

1
2
3

.demo {
    background: radial-gradient(at 20% 100px, red, blue);
}

20200130135252

结束形状（ending shape）

中心点的作用是作为渐变方向的起点，而结束形状的作用则是作为渐变方向的终点；而结束形状要用两个属性才能最终确定：

形状类型：形状类型目前只有圆（circle）和椭圆（ellipse），默认形状为ellipse。

.demo1 {
    background: radial-gradient(circle at 20% 80px, red, blue);
}
.demo2 {
    background: radial-gradient(ellipse at 20% 80px, red, blue);
}

20200130135312

可以看到两种不同的形状的渐变效果也不一样。

半径：而半径的设置并不是直接指定两个半径来确定，而是由内置关键字来自动确定：

closest-side：最近一侧，顾名思义就是按照中心点距离区域横向和纵向最近的一侧来分别计算横向和纵向的半径。当形状类型为circle时，半径取横向半径和纵向半径中较小的那个。

1
2
3

.demo {
    background: radial-gradient(circle closest-side at 20% 80px, red, blue);
}

20200130135329

farthest-side：最远一侧，同理就是按照中心点距离区域横向和纵向最远的一侧来分别计算横向和纵向的半径。
closest-corner：最近一角；形状必须经过区域中离中心点最近的那个角的位置。

farthest-corner：最远一角（默认值）；形状必须经过区域中离中心点最远的那个角的位置。

.demo1 {
    background: radial-gradient(ellipse closest-side at 20% 80px, red, blue);
}
.demo2 {
    background: radial-gradient(ellipse farthest-side at 20% 80px, red, blue);
}
.demo3 {
    background: radial-gradient(ellipse closest-corner at 20% 80px, red, blue);
}
.demo4 {
    background: radial-gradient(ellipse farthest-corner at 20% 80px, red, blue);
}

20200130135345

上图可以很明显的看出这四种方法计算半径的区别；

圆锥渐变

原理

圆锥渐变的原理比较简单，就是指定一个中心点，然后区域内所有的点按照所在的角度（以y轴向上为0度）进行渐变的计算，而渐变点的位置也只能按照角度的范围进行指定，因此渐变方向就是弧度方向（顺时针）。

中心点

conic-gradient()中心点的语法设置与径向渐变的语法一样，通过at关键字进行设置，不过要注意的是at的设置要放在第一个参数的最后：

1 2	background: conic-gradient(from 40deg at 20px 50%, red, blue); // 正确的写法 background: conic-gradient(at 20px 50% from 40deg, red, blue); // 错误的写法

起点

圆锥渐变的起点跟其他渐变不一样，圆锥渐变的起点实际上只是指定从某个弧度开始（相当于指定0deg的轴）；不设置起点，默认就是0deg；通过from关键字来指定：

1
2
3

.demo {
    background: conic-gradient(from 40deg at 20px 50%, red, blue);
}

20200130135418

需要注意的是起点的单位只能是deg或turn，不能使用百分比（%）的语法！

渐变点

渐变点的单位跟起点类似，不过支持百分比的单位，百分比相对的是从起点弧度开始然后顺时针计算（每100% = 360deg，因此可以实测可以超出100%）。

1
2
3

.demo1 {
    background: conic-gradient(from 20deg at 20px 50%, red 20%, blue 0.4turn, orange 180deg);
}

20200130135440

重复渐变

重复渐变的精髓就是：渐变的定义的部分并没有占渐变线或者渐变范围的全部，因此由这一部分定义好的渐变去重复的填充剩余的未定义部分。

很明显，重复渐变对应前面的渐变也就有三种；

重复线性渐变

repeating-linear-gradient()

重复径向渐变

repeating-radial-gradient()

重复圆锥渐变

repeating-conic-gradient()