repeating-conic-gradient()

試一試

background: repeating-conic-gradient(red 0%, yellow 15%, red 33%);

background: repeating-conic-gradient(
  from 45deg at 10% 50%,
  brown 0deg 10deg,
  darkgoldenrod 10deg 20deg,
  chocolate 20deg 30deg
);

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

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

語法

/* Starburst: a blue on blue starburst: the gradient
   is a starburst of lighter and darker blue,
   centered in the upper left quadrant,
   offset by 3degrees so there is no up/down straight line */
repeating-conic-gradient(
  from 3deg at 25% 25%,
  hsl(200 100% 50%) 0deg 15deg,
  hsl(200 100% 60%) 10deg 30deg
)

/* Interpolation in polar color space
  with longer hue interpolation method */
repeating-conic-gradient(in hsl shorter hue, red, blue 90deg, green 180deg)

值

<angle>

以 from 關鍵字開頭，並以一個角度作為其值，定義了漸變的順時針旋轉方向。

<position>

該位置與 background-position 屬性使用相同的長度、順序和關鍵字值，用於定義漸變的中心。如果省略，預設值為 center，表示漸變將居中。

<angular-color-stop>

色標的 <color> 值，後跟一個或兩個可選的位置（沿漸變圓周軸的<angle>）。最後一個色標的角度減去第一個色標的角度，定義了重複漸變的大小。

<color-hint>

一個插值提示，用於定義漸變在相鄰色標之間的過渡方式。該長度定義了在兩個色標之間的哪個點，漸變色應達到顏色過渡的中點。如果省略，顏色過渡的中點將是兩個色標之間的中點。

描述

重複錐形漸變的示例包括星爆效果。repeating-conic-gradient() 函式的結果是 <gradient> 資料型別的物件，這是一種特殊的 <image>。

如果第一個和最後一個色標的角度都沒有分別大於 0deg 或小於 360deg，那麼錐形漸變將不會重複。

與任何漸變一樣，重複錐形漸變沒有內在尺寸；也就是說，它沒有自然或首選的大小，也沒有首選的比例。它的具體尺寸將匹配它所應用的元素的尺寸，或者如果 <image> 被設定為非元素尺寸的其他值，則匹配該尺寸。

因為 <gradient> 屬於 <image> 資料型別，所以它們只能在可以使用 <image> 的地方使用。因此，repeating-conic-gradient() 不能用於 background-color 以及其他使用 <color> 資料型別的屬性。

理解重複錐形漸變

repeating-conic-gradient 的語法與 conic-gradient() 和 repeating-radial-gradient() 的語法相似。與非重複的錐形漸變一樣，色標被放置在一條漸變弧上。與重複的徑向漸變一樣，重複部分的大小是最後一個色標的角度減去第一個色標的角度。

上面的漸變被定義為三分之一藍色，三分之一紅色，三分之一黃色。

repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);

要讓重複漸變能夠重複，我們需要定義第一個和最後一個色標。與非重複漸變一樣，如果沒有明確宣告，第一個和最後一個色標將被假定為 0 和 100% 或 360deg。當預設為這些值時，重複弧度為 360 度，因此不會重複。

與非重複的錐形漸變一樣，色標被放置在一條漸變弧上——即一個圓的周長，而不是從漸變中心發出的漸變線上。顏色過渡就像圍繞圓心旋轉一樣，如果沒有宣告 from <angle>，則從頂部開始，並順時針旋轉一個角度，該角度是最大和最小色標角度之差，然後重複。

重複錐形漸變透過指定一個旋轉角度、漸變中心，然後指定一個色標列表來定義。與非重複錐形漸變一樣，重複錐形漸變的色標使用 <angle> 指定。單位包括 deg（度）、grad（百分度）、rad（弧度）和 turn（圈）。一個圓有 360 度、400 百分度、2π 弧度或 1 圈。支援重複錐形漸變的瀏覽器也接受百分比值，其中 100% 等於 360 度，但這不在規範中。

徑向和錐形漸變的語法允許將漸變中心定位在影像內的任何位置，甚至在影像外部。位置的值與雙值 background-position 的語法相似。

漸變弧是漸變圓周的一部分。0 度是正北方，或 12 點鐘方向。漸變的顏色由帶角度的色標、它們的起點、終點以及中間可選的帶角度的色標點決定。顏色之間的過渡可以透過在相鄰顏色的色標之間新增顏色提示來改變。

自定義漸變

透過在漸變弧上新增更多帶角度的色標點，你可以在多種顏色之間建立高度定製的過渡。色標的位置可以透過使用 <angle> 來明確定義。如果你不指定一個色標的位置，它將被放置在它前面和後面的色標之間的一半位置。與其非重複的漸變類似，如果你不為第一個或最後一個色標指定角度，其值將分別為 0deg 和 360deg。如果你兩者都不宣告角度，你將得到一個不重複的錐形漸變。如果你為第一個或最後一個色標分別聲明瞭非 0 或 360 度的值，漸變將基於該值重複。例如，如果你不為第一個顏色宣告角度，而在最後一個色標上宣告 10%，則該弧將重複 10 次。更確切地說，起點是宣告的第一個色標，終點是宣告的最後一個色標角度。以下兩個漸變是等效的。

repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)

預設情況下，顏色會從一個色標的顏色平滑過渡到下一個色標的顏色，顏色之間的中點是顏色過渡的中間點。你可以透過新增一個顏色提示，將這個顏色過渡的中點移動到兩個色標之間的任何位置，以指示顏色過渡的中點應該在哪裡。

如果兩個或多個色標在同一位置，過渡將是在該位置宣告的第一個和最後一個顏色之間的硬線。

雖然你可以混合使用不同的角度單位，但不要這樣做。這會使 CSS 難以閱讀。

正式語法

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

<conic-gradient-syntax> = 
  [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

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

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

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

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

<angular-color-stop> = 
  <color> <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  |
  <zero>              

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

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

<color-stop-angle> = 
  [ <angle-percentage> | <zero> ]{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>  

無障礙

瀏覽器不會向輔助技術提供有關背景影像的任何特殊資訊。這主要對螢幕閱讀器很重要，因為螢幕閱讀器不會宣告它的存在，因此不會向其使用者傳達任何資訊。雖然可以使用錐形漸變建立餅圖、棋盤和其他效果，但 CSS 影像沒有提供分配替代文字的原生方法，因此由錐形漸變表示的影像對螢幕閱讀器使用者來說將是不可訪問的。如果影像包含對理解頁面整體目的至關重要的資訊，最好在文件中以語義化的方式描述它。

• MDN 理解 WCAG，指南 1.1 解釋
• 理解成功標準 1.1.1 | W3C 理解 WCAG 2.0

示例

黑白星爆效果

div {
  width: 200px;
  height: 200px;
}

<div></div>

div {
  background-image: repeating-conic-gradient(white 0 9deg, black 9deg 18deg);
}

偏心漸變

這個漸變重複了 18 次，但由於我們只能看到右半部分，所以我們只看到了 9 次重複。

div {
  width: 200px;
  height: 200px;
}

<div></div>

div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );
}

色相插值

<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 顏色系統，並對色相進行了插值。

.shorter {
  background-image: repeating-conic-gradient(
    in hsl shorter hue,
    red,
    blue 180deg
  );
}

.longer {
  background-image: repeating-conic-gradient(
    in hsl longer hue,
    red,
    blue 180deg
  );
}

左邊的方框使用較短的插值，這意味著顏色從紅色直接過渡到藍色，使用的是色輪上較短的弧線。右邊的方框使用較長的插值，這意味著顏色從紅色過渡到藍色，使用的是較長的弧線，會經過綠色、黃色和橙色。

更多 repeating-conic-gradient 示例

請參閱使用 CSS 漸變瞭解更多示例。

規範

瀏覽器相容性

另見

• 使用 CSS 漸變
• 其他漸變函式：conic-gradient()、linear-gradient()、repeating-linear-gradient()、radial-gradient()、repeating-radial-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()