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 上檢視此頁面 • 報告此內容的問題