CSS repeating-radial-gradient() 函數

定義和用法

CSS repeating-radial-gradient() 函數用于重復徑向漸變。

徑向漸變	重復徑向漸變

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

一個重復的徑向漸變：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

另一個重復的徑向漸變，設置了形狀大小和位置：

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

另一個重復的徑向漸變，設置了兩個顏色停止位置：

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	定義漸變的形狀。可能的值： ellipse（默認） circle
size	定義漸變的大小。可能的值： farthest-corner（默認） closest-side closest-corner farthest-side
at position	定義漸變的位置。默認值為 "center"。
start-color, ..., last-color	顏色終止點是您希望在其間呈現平滑過渡的顏色。此值由顏色值和一或兩個可選的停止位置（0% 到 100% 之間的百分比或沿漸變軸的長度）組成。

版本：	CSS Images Module Level 3

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

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