小探究：CSSの渐变

2024-02-05 10:51:58

因为我不喜欢背公式，希望自己能找到比较容易理解和推理的记忆方式吧，很早就感觉CSS3渐变的属性组成不太好记忆，所以今天终于挖了这个坑，其实也没什么很特别的，嘻嘻，如果有错误欢迎提出。

基本用法

我们一般都是在添加background的时候会用到这个渐变效果，渐变效果分为linear-gradient（线性渐变）和radial-gradient（径向）。
当然这篇文章主要是围绕linear-gradient展开的。

语法如下：

background: linear-gradient(方向, 颜色1, 颜色2, ...);

因为可以传入多个颜色，所以这里就是一大串了。
另外还有多个兼容前缀的写法，语法也有细微的不同，但是这里就讲的是标准形式，也就是没有前缀的~
示例用法：

linear-gradient(red, blue);
linear-gradient(to right, red , blue);
linear-gradient(180deg, red, blue);
linear-gradient(180deg, red 10%, blue 20%);

方向有两种写法，可以是写top、bottom、left、right，也可以是写具体的角度。

默认情况下是上->下：

background: linear-gradient(red,blue);

to 某个方向（目的地）

这里的值可以是单纯的top，也可以是如top left（左上）这样的组合搭配。
Tip：left top搭配中词语的顺序变换也没有影响。

而它的方向就是以这个目的地为目标，径直发射过去。
举例：
向右下角（right bottom / bottom right）发射过去啦~

background: linear-gradient(to right bottom, red , blue);

角度的范围：
可以是负数到正数！它会进行%360deg的运算，所以0deg和360deg/-360deg是一样的啦。

角度的判断：
让我们先回到不填写方法的时候，渐变是red(1)->blue(2)，但是在0deg的情况下，渐变方向是blue(2)->red(1)：

background: linear-gradient(0deg , red , blue)

随后多次实验会发现，这个角度其实不像transform那种旋转的角度，同样也可以认为是一个发射的角度：

所以呀，就可以认为是像这张图一样的，可以把red作为自己的出发点，然后对着某个角度发射过去。
所以在不写方向的默认情况下，linear-gradient(red,blue);这个角度其实相当于是linear-gradient(180deg, red,blue)。

我们在写颜色的时候后面可以在接一个百分比，这个百分比在MDN中的解释是：

渐近线的颜色停止点在该位置有特定的颜色。该位置可以被指定为线长度的百分比或一个绝对长度。为实现期望的效果，可以指定任意多个颜色停止点。

说实话，我感觉这个解释还是比较模糊，我个人觉得这个终点应该是渐变的终点，所以我开始了小探究（怕被打扰思维的童鞋直接跳过这里，看最后一段吧（怕被打?）），但同样还是要存在一个颜色开始的起点，所以来实验一下：
1.

linear-gradient(to right, red 0%, blue 0%)

因为red设置了0%为终点，按照计算blue应该从0%开始，而blue也同样设置0%为渐变终点，所以blue就全部都占满了，且不存在渐变。

linear-gradient(to right, red 10%, blue 0%)

整个div的宽度是200px，red是10%，可以发现它截止的地方正好是200*10%=20px，但是blue的渐变终点是0。想象一下，就好像红色部分把蓝色的开头给遮住了，所以这个时候没有产生渐变，同样如果blue <= 10%都不会有这个渐变。

linear-gradient(to right, red 0%, blue 10%)

So，如果blue是10%，按照计算，蓝色应该从0%的位置开始，但是渐变的终点是10%，所以会有10%长度的渐变出现。

4.
来个复杂的情况：

linear-gradient(to right, red 40%, blue 50%,yellow 60%);

首先红色部分在40%的时候止步，蓝色的渐变到50%的时候才结束，所以中间有10%的渐变，同理蓝色和黄色部分也有10%的渐变。

linear-gradient(to right, red 40%, blue 50%,yellow 0%);

把黄色部分设为0%，也就是黄色渐变在0%的时候就结束了，这个时候到蓝色部分正好是容器的一半（50%）。

目前看来，这个推理是合理的→_→，当然啦这里还只是我的推理（唔）。然后我找到了一篇文章：https://segmentfault.com/a/11...，有详细的说明和资料，总结来说就是：

百分比是指某个颜色值距离起点的开始位置。
渐变过渡区的占比为总的空间（高度或宽度）减去上下两个着色块空间占比剩下的空间。
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

这是权威的说法哦，也很好理解?（今天就自娱自乐到这里吧，嘻嘻）。