线性渐变linear-gradient硬线

马黑黑

线性渐变背景，两种颜色之间的过渡是均匀的、逐渐的、平缓的，试观察下面四个盒子的线性渐变效果，它们的背景都是由青色过渡到粉红色，渐变方向依次是自左下到右上、自右下到左上、自左到右、自右到左：

background语句分别为：

background: linear-gradient(to right top, teal, pink);
background: linear-gradient(to left top, teal, pink);
background: linear-gradient(to right, teal, pink);
background: linear-gradient(to top, teal, pink);
	

这叫“软线过渡”，其实无线；与之对应的是“硬线过渡”，其实无渐变过渡。硬线过渡有分明的“三八线”，试看：

代码分别是：

background: linear-gradient(to right top, teal 50%, pink 50%);
background: linear-gradient(to left top, teal 50%, pink 50%);
background: linear-gradient(to right, teal 50%, pink 50%);
background: linear-gradient(to top, teal 50%, pink 50%);
	

比较软线与硬线，区别在于后者给两种颜色都规定了相同的数值（可以是像素和百分比），第一个颜色青色，表达式为 teal 50%，表示其位置到50%处终止，第二个颜色粉红色，表达式为 pink 50%，表示其位置从50%处开始。两个颜色，前者的终止位置和后者的开始位置共享一个地方，这个地方就是三八线，异常明晰。

红影

原来后面不给数字，就慢慢洇过去，给了位置，就明确分划开了。学习了

红影

奇怪，我用teal 40%, pink 60%，加起来还是100啊，中间却出现过度色。
而用teal 40%, pink 40%，却也是泾渭分明，只是青色占了40%而粉色占了60%
有点让人想不明白了。

马黑黑

红影 发表于 2022-5-11 22:38
奇怪，我用teal 40%, pink 60%，加起来还是100啊，中间却出现过度色。
而用teal 40%, pink 40%，却也是泾 ...

teal 40%，pink 60%，两个百分比之间，即 40% ~ 60%中的部分，是过渡色，二者交融在这个区间。

两个数值相同，说明前一个终止的地方就是下一个开始的地方，不留过渡区间

红影

是不是加起来100或者大于100的时候，就开始混色，但各50时却泾渭分明。
加起来不到100，就认前一个？
也不对，当前一个大于50，则后一个无论怎么设置，都不混色了。

马黑黑

红影 发表于 2022-5-11 22:42
是不是加起来100或者大于100的时候，就开始混色，但各50时却泾渭分明。
加起来不到100，就认前一个？
也 ...

不是加起来的意思。这么理解吧，假设是自左向右的渐变方向：

第一个颜色：青 50% -- 它从0%开始，到50%结束
第二个颜色：粉红 50% -- 它从50%开始，到100%结束

是这么分配的。如果你改变第二个颜色的开始数值为60%，则两个颜色间有 10% 的区间是交融区间

加林森

学习了。

红影

马黑黑 发表于 2022-5-11 22:41
teal 40%，pink 60%，两个百分比之间，即 40% ~ 60%中的部分，是过渡色，二者交融在这个区间。

两个数 ...

嗯嗯，明白了。这个渐变的情况讲得很清楚，谢谢黑黑

红影

马黑黑 发表于 2022-5-11 23:05
不是加起来的意思。这么理解吧，假设是自左向右的渐变方向：

第一个颜色：青 50% -- 它从0%开始，到50 ...

我是说改变后面为20 30 什么的，就不交融了。反正我只是自己在那乱试，慢慢体会的过程，没事的。

马黑黑

红影 发表于 2022-5-13 14:04
我是说改变后面为20 30 什么的，就不交融了。反正我只是自己在那乱试，慢慢体会的过程，没事的。{:4_173: ...

好的

马黑黑

红影 发表于 2022-5-13 14:03
嗯嗯，明白了。这个渐变的情况讲得很清楚，谢谢黑黑

理解了就好

红影

马黑黑 发表于 2022-5-13 19:16
理解了就好

越学习越觉得神奇呢。

马黑黑

红影 发表于 2022-5-14 11:03
越学习越觉得神奇呢。

学习是一个投入的过程，越学越会发现更多的神奇

红影

马黑黑 发表于 2022-5-14 12:14
学习是一个投入的过程，越学越会发现更多的神奇

也越让人迷醉

马黑黑

红影 发表于 2022-5-15 09:57
也越让人迷醉

大概如此