CSS 徑向漸變
CSS 徑向漸變
徑向漸變由其中心定義。
如需創建徑向漸變，您還必須定義至少兩個色標。
語法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默認地，shape 為橢圓形，size 為最遠角，position 為中心。
徑向漸變-均勻間隔的色標（默認）
下面的例子展示了帶有均勻間隔的色標的徑向漸變：
實例
#grad {
background-image: radial-gradient(red, yellow, green);
}
徑向漸變-不同間距的色標
下面的例子展示了一個徑向漸變，其色標之間的間隔不同：
實例
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
設置形狀
shape 參數定義形狀。它可接受 circle 或 ellipse 值。默認值為 ellipse（橢圓）。
下面的例子展示了一個圓形的徑向漸變：
實例
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
使用大小不同的關鍵字
size 參數定義漸變的大小。它可接受四個值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
實例
設置了不同 size 關鍵詞的徑向漸變：
#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%);
}
