前端干货！利用CSS实现花里胡哨的前端渐变效果
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css中<span style="color: black;">能够</span>进行背景的渐变，<span style="color: black;">一般</span><span style="color: black;">来讲</span>，<span style="color: black;">咱们</span><span style="color: black;">运用</span>的是下面两种渐变</p>线性渐变径向渐变<h2 style="color: black; text-align: left; margin-bottom: 10px;">线性渐变</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">先来看一下语法：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">linear-gradient(
[ &lt;angle&gt; | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">解释一下：</p><angle> <span style="color: black;">方向</span>值指定渐变的方向（或<span style="color: black;">方向</span>）。<side-or-corner> 渐变线的<span style="color: black;">初始</span>点位置。它<span style="color: black;">包括</span>to和两个<span style="color: black;">重要</span>词：<span style="color: black;">第1</span>个指出水平位置left or right， 第二个指出垂直位置top or bottom。<span style="color: black;">重要</span>词的先后<span style="color: black;">次序</span><span style="color: black;">没</span>影响，且都是可选的。<color-stop> 由一个&lt;color&gt;值<span style="color: black;">构成</span>，并且跟随着一个可选的终点位置（<span style="color: black;">能够</span>是一个百分比值<span style="color: black;">或</span>是沿着渐变轴的&lt;length&gt;<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">于是<span style="color: black;">咱们</span>有了下面的效果：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-a5619a524d2867fb87026426dbe3394b_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这是一个从左到右的金色到粉色的线性渐变</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">bac<span style="color: black;">公斤</span>round-image: linear-gradient(to right, gold, pink)</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">径向渐变</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">先来看下语法：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">radial-gradient(
[ [ circle || &lt;length&gt; ] [ at &lt;position&gt; ]? , |
[ ellipse || [ &lt;length&gt; | &lt;percentage&gt; ]{2} ] [ at &lt;position&gt; ]? , |
[ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [ at &lt;position&gt; ]? , |
at &lt;position&gt; ,
]?
&lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
)</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">或</span><span style="color: black;">咱们</span><span style="color: black;">能够</span>简化成下面<span style="color: black;">这般</span>：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">radial-gradient(shape size position, color-stop[...,color-stop]);</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">解释一下：</p><position> 径向渐变的圆心位置<shape> 渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对<span style="color: black;">叫作</span>椭圆）。默认值为椭圆<size> 渐变的尺寸<span style="color: black;">体积</span><color-stop> 由一个<color>值<span style="color: black;">构成</span>，并且跟随着一个可选的终点位置（<span style="color: black;">能够</span>是一个百分比值<span style="color: black;">或</span>是沿着渐变轴的<length><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">于是<span style="color: black;">咱们</span>有了下面的效果：</p>
期待你更多的精彩评论，一起交流学习。 真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。 感谢你的精彩评论，带给我新的思考角度。
页:
[1]