CSS 徑向漸變
CSS 徑向漸變
徑向漸變由其中心定義。
要建立徑向漸變，您還必須至少定義兩個顏色停止點。
語法
background-image: radial-gradient(形狀 大小 at 位置, 起始顏色, ..., 最終顏色);
預設情況下，形狀為橢圓形，大小為farthest-corner，位置為center。
徑向漸變 - 均勻分佈的顏色停止點（預設）
以下示例顯示了具有均勻分佈顏色停止點的徑向漸變
徑向漸變 - 不同間隔的顏色停止點
以下示例顯示了具有不同間隔顏色停止點的徑向漸變
設定形狀
shape 引數定義形狀。它可以取值 circle 或 ellipse。預設值為 ellipse。
以下示例顯示了圓形徑向漸變
使用不同大小的關鍵詞
size 引數定義漸變的大小。它可以取四個值
- closest-side
- farthest-side
- closest-corner
- farthest-corner
示例
具有不同大小關鍵詞的徑向漸變
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
自己動手試一試 »
重複徑向漸變
repeating-radial-gradient() 函式用於重複徑向漸變
示例
一個重複的徑向漸變
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
自己動手試一試 »
