CSS radial-gradient() 函數

CSS 函數 CSS 函數

實例

以下實例演示了徑向漸變 - 顏色結點均勻分佈:

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

定義與用法

radial-gradient() 函數用徑向漸變創建 "圖像"。

徑向漸變由中心點定義。

為了創建徑向漸變你必須設置兩個終止色。

徑向漸變實例

支持版本：CSS3

流覽器支持

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

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

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

CSS 語法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
值 描述
shape 確定圓的類型:
  • ellipse (默認): 指定橢圓形的徑向漸變。
  • circle ：指定圓形的徑向漸變
size 定義漸變的大小，可能值：
  • farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
  • closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
  • closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
  • farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
position 定義漸變的位置。可能值：
  • center（默認）：設置中間為徑向漸變圓心的縱坐標值。
  • top：設置頂部為徑向漸變圓心的縱坐標值。
  • bottom：設置底部為徑向漸變圓心的縱坐標值。
start-color, ..., last-color 用於指定漸變的起止顏色。

更多實例

實例

顏色結點不均勻分佈:

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

實例

圓形徑向漸變:

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

實例

不同尺寸大小關鍵字的使用:

#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 教學: CSS3 漸變

CSS 函數 CSS 函數