CSS radial-gradient() 函數

定義和用法

CSS radial-gradient() 函數將徑向漸變設置為背景圖像。

徑向漸變由其中心定義。

要創建徑向漸變，必須定義至少兩個色標。

徑向漸變示例：

實例

例子 1

色標均勻分布的徑向漸變：

#grad {
  background-image: radial-gradient(red, green, blue);
}

親自試一試

例子 2

色標分布不同的徑向漸變：

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

親自試一試

例子 3

圓形形狀的徑向漸變：

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

親自試一試

例子 4

使用不同大小關鍵詞的徑向漸變：

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

親自試一試

CSS 語法

radial-gradient(shape size at position, start-color, ..., last-color);
值 描述
shape

定義漸變的形狀。可能的值：

  • ellipse（默認）
  • circle
size

定義漸變的大小。可能的值：

  • farthest-corner（默認）
  • closest-side
  • closest-corner
  • farthest-side
position 定義漸變的位置。默認值是 "center"。
start-color, ..., last-color

色標是您希望在其間呈現平滑過渡的顏色。

此值由一個顏色值組成，后跟一個或兩個可選的色標位置（0% 到 100% 之間的百分比或沿漸變軸的長度）。

技術細節

版本： CSS3

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
radial-gradient()
26 10 16 6.1 12.1
兩個位置的色標
71 79 64 12.1 58

相關頁面

教程：CSS 漸變

參考：CSS background-image 屬性

參考：CSS conic-gradient() 函數

參考：CSS linear-gradient() 函數

參考：CSS repeating-conic-gradient() 函數

參考：CSS repeating-linear-gradient() 函數

參考：CSS repeating-radial-gradient() 函數