在 CSS 中，函数 repeating-radial-gradient（） 允许您创建一个图像，该图像由作为背景图像的渐变组成，这些渐变被重复并从原点辐射。该函数类似于 radial-gradient（），因为它采用相同的参数，其中颜色停止在所有方向上无限重复自身以填充容器。生成的图像是 <gradient> 数据类型的特殊图像。
概述
- 每重复一次，色标的位置都会按基本线性渐变长度的倍数移动。
- 如果色标值不同，则在色标之间可以看到明显的视觉过渡，因为结束色标的位置与起始色标的位置重合。
- 重复径向渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
- 图像的大小将与它适用的元素的大小匹配。
- <gradient>数据类型只能在使用 <image> 的地方使用。
- repeating-radial-gradient（） 函数不能与 <color>数据类型和 background-color 等属性一起使用。
可能的值
重复的径向梯度可以具有以下值作为参数：
1. <position>：指定渐变的位置。如果未指定任何值，则默认为 <center>。
2. <shape>：值可以是圆（渐变为半径恒定的圆）或椭圆（梯度为轴对齐的椭圆）。如果未指定任何值，则默认为椭圆。
3. <extent-keyword>：指定渐变结束形状的大小。渐变、圆圈和椭圆接受以下关键字作为其大小：
| 关键词 | 描述 |
|---|---|
| closest-side |
对于圆：渐变的结束形状与最靠近其中心的框的两侧相交。 对于椭圆：渐变的结束形状与最接近中心的垂直边和水平边相交。 |
| closest-corner |
渐变的结束形状正好与盒子离其中心最近的角相交。 |
| farthest-side |
对于圆：渐变的结束形状与框的两侧相交，最远于框的中心。 对于椭圆：渐变的结束形状与离中心最远的垂直边和水平边相交。 |
| farthest-corner |
渐变的结束形状恰好与盒子离其中心最远的角落相交。这是默认值。 |
4. <color-stop>：由色标的 <length> 值以及一个或两个可选的色标位置值组成。
- 止损位置值可以是 <percentage>，也可以是 <length> 值。
- 值等于 0% 或 0，表示梯度的中心。
- 值等于 100%，表示结束形状与虚拟渐变光线的交点。
- 介于两者之间的百分比值线性放置在虚拟梯度光线上。
语法
repeating-radial-gradient(shape size at position, start-color, ..., last-color);
CSS repeating-radial-gradient（） - 最远的一侧
形状为椭圆且容器最远边的重复径向渐变示例：
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
}
.repeat-radial {
background: repeating-radial-gradient(
ellipse farthest-side at 20% 20%,
red,
black 5%,
yellow 5%,
blue 10%
);
background: repeating-radial-gradient(
ellipse farthest-side at 20% 20%,
red 0 5%,
yellow 5% 10%
);
}
</style>
</head>
<body>
<h1>Repeating radial gradient</h1>
<div class="repeat-radial"></div>
</body>
</html>
CSS repeating-radial-gradient（） - 最近侧
具有圆形形状和容器最近一侧的重复径向渐变示例：
<html>
<head>
<style>
div {
height: 300px;
width: 300px;
}
.repeat-radial {
background: repeating-radial-gradient(
circle closest-side at 20% 20%,
black 5px,
black 15px,
yellow 25px,
yellow 25px
);
}
</style>
</head>
<body>
<h1>Repeating radial gradient</h1>
<div class="repeat-radial"></div>
</body>
</html>
CSS repeating-radial-gradient（） - 最远的角
形状为椭圆且容器最远角的重复径向渐变示例：
<html>
<head>
<style>
div {
height: 300px;
width: 300px;
}
.repeat-radial {
background: repeating-radial-gradient(
ellipse farthest-corner at 20% 20%,
red 0 5%,
green 5% 10%
);
background: repeating-radial-gradient(
ellipse farthest-corner at 20% 20%,
red,
black 5%,
blue 5%,
green 10%
);
}
</style>
</head>
<body>
<h1>Repeating radial gradient</h1>
<div class="repeat-radial"></div>
</body>
</html>
