repeating-radial-gradient()

**repeating-radial-gradient()** CSS 函数创建一个图像，该图像由从原点辐射出的重复渐变组成。它类似于 radial-gradient() 并采用相同的参数，但它在所有方向上无限重复颜色停止，以覆盖其整个容器，类似于 repeating-linear-gradient()。该函数的结果是一个 <gradient> 数据类型的对象，它是一种特殊的 <image>。

试试看

每次重复时，颜色停止的位置都会根据基本径向渐变的尺寸（最后一个颜色停止与第一个颜色停止之间的距离）的倍数进行偏移。因此，每个结束颜色停止的位置都与一个起始颜色停止的位置重合；如果颜色值不同，这将导致明显的视觉过渡，可以通过重复第一个颜色作为最后一个颜色来缓解这种过渡。

与任何渐变一样，重复径向渐变没有固有尺寸；也就是说，它没有自然或首选大小，也没有首选比例。它的实际大小将与它所应用的元素的大小匹配。

因为 <gradient> 属于 <image> 数据类型，所以它们只能在可以使用 <image> 的地方使用。因此，repeating-radial-gradient() 无法在 background-color 和使用 <color> 数据类型的其他属性上使用。

语法

css

/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green,
   with the colors repeating every 30px */
repeating-radial-gradient(circle at center, red 0, blue, green 30px)

/* An elliptical gradient near the top left of its container,
   starting red, changing to green and back again,
   repeating five times between the center and the bottom right corner,
   and only once between the center and the top left corner */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)

值

<position>

渐变的位置，解释方式与 background-position 或 transform-origin 相同。如果未指定，则默认为 center。

<shape>

渐变的形状。该值可以是 circle（表示渐变的形状是具有恒定半径的圆）或 ellipse（表示形状是轴对齐的椭圆）。如果未指定，则默认为 ellipse。

<extent-keyword>

一个描述结束形状大小的关键字。可能的值是

关键字	描述
`closest-side`	渐变的结束形状与最靠近其中心的盒子边相遇（对于圆）或与最靠近中心的垂直和水平边相遇（对于椭圆）。
`closest-corner`	渐变的结束形状大小调整为正好与盒子从其中心最靠近的角落相遇。
`farthest-side`	类似于 `closest-side`，但结束形状大小调整为与最远离其中心的盒子边相遇（或垂直和水平边）。
`farthest-corner`	渐变的结束形状大小调整为正好与盒子从其中心最远的角落相遇。

**注意：** 该函数的早期实现包括其他关键字（cover 和 contain）作为标准 farthest-corner 和 closest-side 的同义词。只使用标准关键字，因为一些实现已经放弃了那些较旧的变体。

<color-stop>

颜色停止的 <color> 值，后面可以跟一个可选的停止位置（沿着渐变轴的 <percentage> 或 <length>）。0% 的百分比或 0 的长度表示渐变的中心；值 100% 表示结束形状与虚拟渐变射线的交点。介于两者之间的百分比值在虚拟渐变射线上线性定位。

正式语法

<repeating-radial-gradient()> = 
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )  

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>

示例

黑白色渐变

<div class="radial-gradient"></div>

.radial-gradient {
  width: 120px;
  height: 120px;
}

css

.radial-gradient {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

Farthest-corner

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

css

.radial-gradient {
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red,
    black 5%,
    blue 5%,
    green 10%
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red 0 5%,
    green 5% 10%
  );
}

椭圆形渐变将从左上角的 20% 处居中，并在中心和最远角落（右下角）之间重复 10 次。支持多位置颜色停止的浏览器将显示一个红色和绿色的条纹椭圆。不支持该语法的浏览器将看到从红色到黑色，然后从蓝色到绿色的渐变。

使用色调进行插值

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

在这个插值示例中，使用的是 hsl 颜色系统，并且对色调进行插值。

css

.shorter {
  background-image: repeating-radial-gradient(
    circle at center in hsl shorter hue,
    red 30px,
    blue 60px
  );
}

.longer {
  background-image: repeating-radial-gradient(
    circle at center in hsl longer hue,
    red 30px,
    blue 60px
  );
}

左侧的框使用的是较短插值，这意味着颜色从红色到蓝色使用的是色轮上的较短弧线。右侧的框使用的是较长插值，这意味着颜色从红色到蓝色使用的是较长弧线，经过绿色、黄色和橙色。

注意：请查看使用 CSS 渐变获取更多示例。

规范

规范
CSS Images 模块 3 级 # 重复渐变

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

使用 CSS 渐变
其他渐变函数： radial-gradient()，linear-gradient()，repeating-linear-gradient()，conic-gradient()，repeating-conic-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
image()
element()
image-set()
cross-fade()