前端干货！利用CSS实现花里胡哨的前端渐变效果

4lqedz

css中能够进行背景的渐变，一般来讲，咱们运用的是下面两种渐变

线性渐变径向渐变

线性渐变

先来看一下语法：

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ) \---------------------------------/ \----------------------------/ Definition of the gradient line List of color stops

解释一下：

<angle> 方向值指定渐变的方向（或方向）。<side-or-corner> 渐变线的初始点位置。它包括to和两个重要词：第1个指出水平位置left or right， 第二个指出垂直位置top or bottom。重要词的先后次序没影响，且都是可选的。<color-stop> 由一个&lt;color&gt;值构成，并且跟随着一个可选的终点位置（能够是一个百分比值或是沿着渐变轴的&lt;length&gt;

于是咱们有了下面的效果：

这是一个从左到右的金色到粉色的线性渐变

bac公斤round-image: linear-gradient(to right, gold, pink)

径向渐变

先来看下语法：

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; ]+ )

或咱们能够简化成下面这般：

radial-gradient(shape size position, color-stop[...,color-stop]);

解释一下：

<position> 径向渐变的圆心位置<shape> 渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对叫作椭圆）。默认值为椭圆<size> 渐变的尺寸体积<color-stop> 由一个<color>值构成，并且跟随着一个可选的终点位置（能够是一个百分比值或是沿着渐变轴的<length>

于是咱们有了下面的效果：

wrjc1hod

期待你更多的精彩评论，一起交流学习。

qzmjef

真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。

qzmjef

感谢你的精彩评论，带给我新的思考角度。