CSS repeating-radial-gradient() 函数

repeating-radial-gradient() 是一种 CSS 函数，用于创建一个沿径向渐变的图像，并重复该渐变。与 radial-gradient() 不同的是，它会将渐变图案重复显示，直到覆盖整个元素区域。

基本语法

repeating-radial-gradient(shape size at position, stop..., stop...)

• shape：指定渐变的形状，可以是 circle 或 ellipse。
• size：指定渐变的尺寸，可以是预定义的关键字（如 closest-side、farthest-corner），也可以是自定义的长度值或百分比。
• at position：可选参数，用来指定渐变中心的位置。
• stop：渐变停止点，指定颜色和位置。

示例

示例 1：基本用法

.example {
    background: repeating-radial-gradient(circle at center, red, yellow 10%, green 20%);
}

在这个例子中，渐变从红色开始，到黄色结束，然后重复。渐变的中心位于元素的中心，红色和黄色之间的距离为10%，黄色和绿色之间的距离为10%。

示例 2：使用关键字尺寸

.example {
    background: repeating-radial-gradient(circle closest-side, blue, cyan 5px, magenta 10px);
}

在这个例子中，渐变的尺寸基于最近的边框，蓝色到青色的距离是5像素，青色到品红的距离是5像素。渐变会根据这个规则重复。

示例 3：使用百分比尺寸

.example {
    background: repeating-radial-gradient(ellipse farthest-corner at 20% 80%, orange, purple 20%, pink 40%);
}

在这个例子中，渐变的形状是一个椭圆，尺寸基于最远的角，渐变中心位于元素的20%宽度和80%高度处。橙色到紫色的距离是20%，紫色到粉红色的距离是20%。

示例 4：使用透明度

.example {
    background: repeating-radial-gradient(circle at top right, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.5) 10%);
}

在这个例子中，渐变从半透明的黑色到半透明的白色重复，中心位于元素的右上角。

多个渐变层叠

可以将多个 repeating-radial-gradient() 函数合并成一个背景图像，形成多层渐变效果。

.example {
    background:
        repeating-radial-gradient(circle at center, red, yellow 10%, green 20%),
        repeating-radial-gradient(circle at 50% 50%, blue, cyan 10%, magenta 20%);
}

在这个例子中，元素具有两层渐变，第一层渐变的中心位于元素的中心，第二层渐变的中心位于元素的中心位置。

渐变与透明度的结合

渐变不仅可以应用于颜色，还可以应用于透明度，从而创建出动态的效果。

.example {
    background: repeating-radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

在这个例子中，渐变从完全透明的黑色到半透明的黑色再到完全透明的黑色，创建出一个模糊的效果。

通过这些示例，我们可以看到 repeating-radial-gradient() 的强大功能和灵活性，它可以创建出复杂而美丽的背景效果。