CSS repeating-radial-gradient() 函數

CSS 函數 CSS 函數

實例

重複的線性漸變:

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

定義與用法

repeating-radial-gradient() 函數用於創建重複的徑向漸變 "圖像"。

支持版本：CSS3

流覽器支持

表格中的數字表示支持該函數的第一個流覽器版本號。

"webkit" 或 "moz" 或 "o" 指定的數字為支持該函數的第一個版本號首碼。

函數
repeating-radial-gradient() 26.0
10.0 -webkit-		 10.0 16.0
3.6 -moz-		 6.1
5.1 -webkit-		 12.1
11.1 -o-

CSS 語法

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);
值 描述
shape 定義漸變的形狀。可以是:
  • ellipse (默認)：指定橢圓形的徑向漸變
  • circle：指定圓形的徑向漸變
size 邊緣輪廓的具體位置。可以是以下值：
  • farthest-corner (默認)：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。
  • closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊。
  • closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角。
  • farthest-side：與 closest-side 相反，指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊。
position 圓心位置，類似 on與 background-position 或者 transform-origin。默認為 "center"
start-color, ..., last-color 用於指定漸變的起止顏色，可以使用 長度值或百分比來指定起止色位置，但不允許負值。

CSS 教學: CSS3 漸變

CSS 函數 CSS 函數