CSS渐变效果：线性渐变、径向渐变、重复渐变

渐变是CSS3中非常有用的一种效果，可以用来实现很多美观的效果。本文将会详细介绍CSS渐变效果的三种类型：线性渐变、径向渐变、重复渐变，其中包含对应的函数、参数用法和代码案例。

线性渐变

线性渐变是指在两个或多个颜色之间产生平滑的过渡。它的语法如下：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction表示渐变方向，可以是to left、to right、to top、to bottom等；color-stop表示渐变的颜色，可以有多个，且必须按照从上到下或从左到右的顺序排列。

下面是一个实例：

background: linear-gradient(to right, #ff0000, #00ff00);

这个实例表示从左到右，颜色从红色渐变到绿色。

径向渐变

径向渐变是指从圆形或椭圆形中心向四周辐射状渐变的效果。它的语法如下：

background: radial-gradient(shape, size, position, color-stop1, color-stop2, ...);

其中，shape表示形状，可以是circle或ellipse；size表示大小，可以是closest-side、farthest-side、closest-corner、farthest-corner；position表示位置，可以是center center、left top等；color-stop表示渐变的颜色，可以有多个。

下面是一个实例：

background: radial-gradient(circle, #ff0000, #00ff00);

这个实例表示从圆形中心，颜色从红色渐变到绿色。

重复渐变

重复渐变是指将渐变效果重复多次，以填充整个区域。它的语法如下：

background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction表示渐变方向，color-stop表示渐变的颜色，可以有多个。

下面是一个实例：

background: repeating-linear-gradient(to right, #ff0000, #00ff00 20px);

这个实例表示从左到右，颜色从红色渐变到绿色，每20px重复一次。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS透明度与渐变：rgba、opacity、背景透明
• 下一篇： CSS字体样式：字体族、字号、字重、斜体