CSS 背景色 背景圖片 漸變背景 - 徑向漸變 background-image:radial-gradient()

radial-gradient() 用來生成徑向漸變的圖片

---

基礎語法

background-image: radial-gradient(
	shape extent at positionX positionY,
	colorStop positionStrop,
	colorStrop_2 positonStop_2,
	……
)

參數說明

參數名稱	說明	備註
shape	定義徑向漸變的邊緣形狀 可能的值包括 circle == 圓形 ellipse == 橢圓形 形狀的比例等於容器的比例
extent	定義漸變的邊緣位置 也就是定義了漸變的尺寸範圍 可能的值包括 farthest-side == 最遠的邊 [漸變的邊緣同容器最遠的變相切] farthest-corner == 最遠的角 [漸變的邊緣同容器最遠的角相交] closest-side == 最近的邊 [漸變的邊緣同容器最近的邊相切] closest-corner == 最近的角 [漸變的邊緣同容器最近的角相交]
at	關鍵字 不可更改 若是定義了 shape 或 extent 則必須有
positionX	定義漸變的中心點相對於容器左上角的 X 軸距離 可能的值是 10px == 長度值 10% == 百分比數值
positionY	定義漸變的中心點相對於容器左上角的 Y 軸距離 可能的值是 10px == 長度值 10% == 百分比數值
colorStop	關鍵點的顏色
positionStop	關鍵點的位置	能夠超過 100% 例如：200% 也是合法的

• 備註：
  • 若是有多個關鍵點 原則上 後面點的位置須要 > 前面點的位置

---

實例效果

• shape == circle 效果

  • 爲了強化區別 漸變背限制在很是狹小的範圍

  background-image: radial-gradient( circle closest-side at 50% 50%, #fff 0%, red 85%, blue 100%);

• shape == ellipse 效果

  • 爲了強化區別 漸變背限制在很是狹小的範圍

  background-image: radial-gradient(ellipse closest-side at 50% 50%, #fff 0%,  red 85%, blue 100% );

  background-image: radial-gradient(ellipse closest-side at 30% 30%, #fff 0%, red 85%,blue 100%);

  
  以上 兩個徑向漸變的惟一區別就是 圓心的位置，從中能夠看到 ellipse 形狀的漸變，比例是同容器的比例相同的；

---

• extent 定義邊緣的位置關鍵字

  • extent == farthest-side 效果

  background-image: radial-gradient(ellipse farthest-side at 30% 30%, #fff  0%, red 85%, blue 100%);

  • extent == farthest-corner 效果

  background-image: radial-gradient(ellipse farthest-corner at 30% 30%, #fff 0%, red 85%, blue 100%);

  • extent == closest-side 效果

  background-image: radial-gradient(ellipse closest-side at 30% 30%, #fff 0%, red 85%,blue 100%);

  • extent == closest-corner 效果

  background-image: radial-gradient(ellipse closest-corner at 30% 30%, #fff 0%, red 85%, blue 100%);

  以上4個徑向漸變的區別就是 extent 參數變化[決定了漸變的邊緣也就是 關鍵點位置是100%的位置 ]；這個位置同 容器的尺寸共同定義到了橢圓形漸變的範圍；
  關鍵點：
  1： 漸變形狀的比例 同容器的比例相同
  2：extent 定義了漸變的邊緣位置
  farthest-side == 邊緣同容器的最遠邊相切
  farthest-corner == 邊緣同容器的最遠角相交；
  closet-side == 邊緣同容器的最近邊相切；
  closet-corner == 邊緣同容器的最近交相交；

---

• positionStop 參數 > 100% 的狀況

  background-image: radial-gradient(ellipse farthest-corner at 30% 30%, red 0%,blue 150%);

  
  在這種狀況之下 容器的背景圖片沒有出現 == blue 的狀況；

---

相關內容：
CSS 背景色 背景圖片 漸變背景 - 線性漸變 background:linear-gradient()
CSS 背景色 背景圖片 漸變背景 - 重複線性漸變 background-image: repeating-linear-gradient()