repeating-radial-gradient()

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

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

试一试

background: repeating-radial-gradient(#e66465, #9198e5 20%);

background: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

background: repeating-radial-gradient(
  circle at 100%,
  #333333,
  #333333 10px,
  #eeeeee 10px,
  #eeeeee 20px
);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

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

与任何渐变一样，重复径向渐变没有固有尺寸；即，它没有自然或首选尺寸，也没有首选比例。它的具体尺寸将与其所应用元素的尺寸匹配。

由于 <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-interpolation-method> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

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

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<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>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

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

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

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-length> = 
  <length-percentage>{1,2}

示例

黑白渐变

<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 图像模块第三级 # repeating-gradients

浏览器兼容性

另见

使用 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()

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025 年 10 月 10 日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题