radial-gradient()

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

radial-gradient() CSS 函式會建立一個由兩種或多種顏色組成的、從原點輻射出來的漸進式過渡的影像。其形狀可以是圓形或橢圓形。該函式的結果是一個 <gradient> 資料型別的物件，這是一種特殊的 <image>。

試一試

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

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

background: radial-gradient(
  circle at 100%,
  #333333,
  #333333 50%,
  #eeeeee 75%,
  #333333 75%
);

background:
  radial-gradient(ellipse at top, #e66465, transparent),
  radial-gradient(ellipse at bottom, #4d9f0c, transparent);

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

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

語法

css

/* A gradient with a single color of red */
radial-gradient(red)

/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)

/* hsl color space with longer hue interpolation */
radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)

徑向漸變透過指定漸變的中心（0% 橢圓所在的位置）以及結束形狀（100% 橢圓）的大小和形狀來定義。

值

<position>

漸變的位置，其解析方式與 background-position 或 transform-origin 相同。如果未指定，預設為 center。

<ending-shape>

漸變的結束形狀。該值可以是 circle（表示漸變形狀是半徑固定的圓形）或 ellipse（表示形狀是軸對齊的橢圓形）。如果未指定，預設為 ellipse。

<size>

決定漸變結束形狀的大小。如果省略，則預設為 farthest-corner。它可以透過關鍵字或顯式值來指定。為了理解關鍵字的定義，可以把漸變盒的邊緣想象成在兩個方向上無限延伸，而不是有限的線段。

圓形和橢圓形漸變都接受以下關鍵字作為其 <size>

關鍵字	描述
`closest-side`	漸變的結束形狀恰好觸及離其中心最近的邊（對於圓形）或同時觸及離中心最近的垂直和水平邊（對於橢圓形）。
`closest-corner`	漸變的結束形狀的大小被設定為恰好觸及離其中心最近的角。
`farthest-side`	與 `closest-side` 類似，但結束形狀的大小被設定為觸及離其中心最遠的邊（或最遠的垂直和水平邊）。
`farthest-corner`	預設值，漸變的結束形狀的大小被設定為恰好觸及離其中心最遠的角。

如果 <ending-shape> 被指定為 circle，其大小可以顯式地指定為一個 <length>，這提供了一個明確的圓半徑。負值無效。

如果 <ending-shape> 被指定為 ellipse，其大小可以指定為帶有兩個值的 <length-percentage>，以提供一個明確的橢圓尺寸。第一個值表示水平半徑，第二個值是垂直半徑。百分比值是相對於漸變盒的相應尺寸計算的。負值無效。

當省略 <ending-shape> 關鍵字時，漸變的形狀由給定的大小決定。一個 <length> 值會產生一個圓形，而兩個 <length-percentage> 單位的值會產生一個橢圓形。單個 <percentage> 值是無效的。

<linear-color-stop>

一個色標的 <color> 值，後跟一個或兩個可選的停止位置（可以是沿漸變軸的 <percentage> 或 <length>）。0% 的百分比或 0 的長度表示漸變的中心；100% 的值表示結束形狀與虛擬漸變射線的交點。中間的百分比值則線性地定位在漸變射線上。包含兩個停止位置等同於在兩個位置宣告兩個具有相同顏色的色標。

<color-hint>

顏色提示（color-hint）是一個插值提示，定義了漸變在相鄰色標之間如何過渡。該長度定義了在兩個色標之間的哪個點上，漸變顏色應達到顏色過渡的中點。如果省略，顏色過渡的中點就是兩個色標之間的中點。

描述

與任何漸變一樣，徑向漸變沒有固有的尺寸；也就是說，它沒有自然或首選的大小，也沒有首選的比例。它的具體大小將與它所應用的元素的大小相匹配。

要建立一個重複以填充其容器的徑向漸變，請改用 repeating-radial-gradient() 函式。

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

Graph explaining radial gradients: the virtual radiant ray is horizontal starting from the midpoint. The elliptical gradient, and therefore the ending shape, has the same aspect ratio as the box upon which it is declared.

徑向漸變由一個中心點、一個結束形狀以及兩個或多個色標點來定義。

為了建立平滑的漸變，radial-gradient() 函式會繪製一系列從中心向結束形狀（並可能超出）輻射的同心形狀。結束形狀可以是圓形或橢圓形。

色標點位於一條從中心水平向右延伸的虛擬漸變射線上。基於百分比的色標位置是相對於結束形狀與該漸變射線的交點來計算的，該交點代表 100%。每個形狀都是單一的顏色，由它與漸變射線相交處的顏色決定。

正式語法

<radial-gradient()> = 
  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: 240px;
  height: 120px;
}

css

.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}

非居中漸變

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

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

css

.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #ff3355 0%,
    #4433ee 100%
  );
}

色相插值

<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: radial-gradient(
    circle at center in hsl shorter hue,
    red,
    blue
  );
}

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

左邊的框使用了較短插值法，這意味著顏色在色輪上沿較短的弧線直接從紅色變為藍色。右邊的框使用了較長插值法，這意味著顏色沿較長的弧線從紅色變為藍色，途中經過了綠色、黃色和橙色。