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

CSS中的渐变效果是制作网页动画和特效的重要手段之一。本文将详细介绍CSS中的三种渐变效果：线性渐变、径向渐变、重复渐变。

线性渐变

线性渐变是从一个方向到另一个方向的渐变。可以通过CSS的linear-gradient函数来实现。该函数的语法如下：

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

其中，direction表示渐变方向，可以使用deg、rad、turn等单位来表示；color-stop表示渐变颜色的位置和颜色值，可以使用百分比或具体数值来表示。 下面是一个简单的案例：

background: linear-gradient(90deg, #FF0000, #0000FF);

该案例实现的是从上到下的红蓝渐变效果。

径向渐变

径向渐变是从一个圆心向四周扩散的渐变。可以通过CSS的radial-gradient函数来实现。该函数的语法如下：

background: radial-gradient(shape size at position, start-color, ..., last-color);

其中，shape表示渐变形状，可以使用circle或ellipse来表示；size表示渐变形状的大小，可以使用具体数值或百分比来表示；at position表示渐变的位置，可以使用具体数值或百分比来表示；start-color和last-color表示渐变的起始颜色和结束颜色。 下面是一个简单的案例：

background: radial-gradient(circle, #FF0000, #0000FF);

该案例实现的是从圆心向四周扩散的红蓝渐变效果。

重复渐变

重复渐变是将渐变效果进行复制并重复显示。可以通过CSS的repeating-linear-gradient和repeating-radial-gradient函数来实现。这两个函数的使用方法与linear-gradient和radial-gradient函数类似，只是多了一个repeat的参数表示重复次数。 下面是一个简单的案例：

background: repeating-linear-gradient(45deg, #FF0000, #0000FF 20%, #FF0000 20%, #0000FF 40%);

该案例实现的是从左上角到右下角的45度斜线上的红蓝重复渐变效果。

通过本文的讲解，相信大家已经掌握了CSS中的渐变效果，并能够通过对应的函数和参数实现各种不同的渐变效果。

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

• 上一篇： CSS透明度与渐变：rgba、opacity、背景透明
• 下一篇： CSS浮动与清除浮动：清除浮动方法、浮动布局