CSS | 重复径向梯度（repeating-radial-gradient() 函数）

简介

repeating-radial-gradient() 是 CSS 中的一个函数，它可以创建一个重复的径向渐变（radial gradient）背景。它的语法很简单，如下所示：

background: repeating-radial-gradient([shape | size | position]? , [color-stop], ...);

用途：

• 创建一个重复的径向渐变背景；
• 可以指定渐变的形状、尺寸、位置和颜色变换停止点。

语法

repeating-radial-gradient() 函数的语法如下所示：

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

参数说明：

• shape（可选）：定义渐变的形状，可以是一个关键字或者是数值。可选值有 ellipse（椭圆形）和 circle（圆形），默认值为 ellipse。
• size（可选）：定义渐变的尺寸，可以是一个关键字或者是数值。可选值有 farthest-corner（尺寸为容器对角线的一半）和 closest-side（尺寸为容器的最短边），默认值为 farthest-corner。
• position（可选）：定义渐变的起始位置，可以是一个关键字或者是数值。可选值有 center（中心点）、 top（上边缘中点）、 right（右边缘中点）、 bottom（下边缘中点）、 left（左边缘中点）和两者之间的百分比单位，例如 50% 50%（位于容器中心）。
• color-stop：指定颜色变换的停止点。可以是一个颜色值或者颜色值和一个百分比值。多个颜色变换停止点之间用逗号分隔。

实例

div {
  background: repeating-radial-gradient(ellipse farthest-corner at center, #fff 0, #fff 10%, #f1f1f1 10%, #f1f1f1 20%);
}

效果：

总结

repeating-radial-gradient() 函数可以创建一个重复的径向渐变背景，在需要制作纹理或背景图案时非常有用。要灵活使用该函数，需要理解它的各个参数及其使用方法。