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