CSS的徑向漸變是一種常見的CSS顏色漸變方式,通過定義一個或多個顏色點和中心半徑等參數(shù),使得從一個顏色逐漸過渡到另一個顏色,形成漸變效果。
background: radial-gradient(center, ellipse cover, #color1 0%, #color2 100%);
其中,center表示漸變中心,默認為50% 50%
(即居中),可以設(shè)為其他值;ellipse cover表示漸變形狀,默認為圓形,也可以設(shè)為橢圓形或正方形等形狀以達到不同的效果;color1和color2表示漸變區(qū)間的起始點和重點顏色,可以定義多個,按順序漸變。
除了使用具體的顏色值進行漸變,還可以使用關(guān)鍵字(如transparent
表示透明色)或者rgb、hsl等顏色模式定義顏色。
徑向漸變不僅可以應(yīng)用于背景色,還可以應(yīng)用于邊框色、文本色等屬性,在實際開發(fā)中靈活使用可以讓頁面效果更加豐富多彩。