线性渐变linear-gradient硬线
<style>.outer {
margin: auto;
width: 740px;
min-height: 400px;
position: relative;
}
.outer p { padding: 8px 0; margin: 0; }
.wrap {
margin: auto;
width: 700px;
min-height: 120px;
display: flex;
gap: 10px;
}
.wrap div { width: 160px; height: 120px; }
.ln2rt { background: linear-gradient(to right top, teal, pink); }
.ln2lt { background: linear-gradient(to left top, teal, pink); }
.ln2r { background: linear-gradient(to right, teal, pink); }
.ln2t{ background: linear-gradient(to top, teal, pink); }
.yx2rt { background: linear-gradient(to right top, teal 50%, pink 50%); }
.yx2lt { background: linear-gradient(to left top, teal 50%, pink 50%); }
.yx2r { background: linear-gradient(to right, teal 50%, pink 50%); }
.yx2t{ background: linear-gradient(to top, teal 50%, pink 50%); }
</style>
<div class="outer">
<p>线性渐变背景，两种颜色之间的过渡是均匀的、逐渐的、平缓的，试观察下面四个盒子的线性渐变效果，它们的背景都是由青色过渡到粉红色，渐变方向依次是自左下到右上、自右下到左上、自左到右、自右到左：</p>
<div class="wrap">
<div class="ln2rt"></div>
<div class="ln2lt"></div>
<div class="ln2r"></div>
<div class="ln2t"></div>
</div>
<p>background语句分别为：</p>
<pre><span style="color: blue;">background</span>: linear-gradient(to right top, teal, pink);
<span style="color: blue;">background</span>: linear-gradient(to left top, teal, pink);
<span style="color: blue;">background</span>: linear-gradient(to right, teal, pink);
<span style="color: blue;">background</span>: linear-gradient(to top, teal, pink);
</pre>
<p>这叫“软线过渡”，其实无线；与之对应的是“硬线过渡”，其实无渐变过渡。硬线过渡有分明的“三八线”，试看：</p>
<div class="wrap">
<div class="yx2rt"></div>
<div class="yx2lt"></div>
<div class="yx2r"></div>
<div class="yx2t"></div>
</div>
<p>代码分别是：</p>
<pre><span style="color: blue;">background</span>: linear-gradient(to right top, teal 50%, pink 50%);
<span style="color: blue;">background</span>: linear-gradient(to left top, teal 50%, pink 50%);
<span style="color: blue;">background</span>: linear-gradient(to right, teal 50%, pink 50%);
<span style="color: blue;">background</span>: linear-gradient(to top, teal 50%, pink 50%);
</pre>
<p>比较软线与硬线，区别在于后者给两种颜色都规定了相同的数值（可以是像素和百分比），第一个颜色青色，表达式为 teal 50%，表示其位置到50%处终止，第二个颜色粉红色，表达式为 pink 50%，表示其位置从50%处开始。两个颜色，前者的终止位置和后者的开始位置共享一个地方，这个地方就是三八线，异常明晰。</p>
</div> 原来后面不给数字，就慢慢洇过去，给了位置，就明确分划开了。学习了{:4_187:} 奇怪，我用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%中的部分，是过渡色，二者交融在这个区间。
两个数 ...
嗯嗯，明白了。这个渐变的情况讲得很清楚，谢谢黑黑{:4_187:} 马黑黑 发表于 2022-5-11 23:05
不是加起来的意思。这么理解吧，假设是自左向右的渐变方向：
第一个颜色：青 50% -- 它从0%开始，到50 ...
我是说改变后面为20 30 什么的，就不交融了。反正我只是自己在那乱试，慢慢体会的过程，没事的。{:4_173:} 红影 发表于 2022-5-13 14:04
我是说改变后面为20 30 什么的，就不交融了。反正我只是自己在那乱试，慢慢体会的过程，没事的。{:4_173: ...
好的 红影 发表于 2022-5-13 14:03
嗯嗯，明白了。这个渐变的情况讲得很清楚，谢谢黑黑
理解了就好 马黑黑 发表于 2022-5-13 19:16
理解了就好
越学习越觉得神奇呢。{:4_187:} 红影 发表于 2022-5-14 11:03
越学习越觉得神奇呢。
学习是一个投入的过程，越学越会发现更多的神奇 马黑黑 发表于 2022-5-14 12:14
学习是一个投入的过程，越学越会发现更多的神奇
也越让人迷醉{:4_187:} 红影 发表于 2022-5-15 09:57
也越让人迷醉
大概如此
页:
[1]