在CSS中,徑向漸變是一種將顏色從中心點向四周輻射漸變的背景樣式。若需要實現徑向漸變背景,可以使用以下代碼:
background-size: cover; background-image: radial-gradient(circle, #ffffff, #000000);
代碼中,background-size屬性設置為cover,表示背景圖像大小自適應并完整覆蓋背景區域。background-image屬性使用radial-gradient()函數,該函數接受兩個參數,第一個參數為輻射形狀,可選值包括circle、ellipse、closest-side、farthest-side、closest-corner、farthest-corner,這里我們使用circle表示正圓形。第二個參數為顏色漸變,可為單個顏色值或由多個顏色表示的逗號分隔列表(從中心點向外逐漸漸變)。例如上述代碼表示從白色向黑色漸變,漸變位置是正圓形。
除了使用單一顏色外,還可以使用透明度進行背景疊加,例如:
background-size: cover; background-image: radial-gradient(circle, rgba(255,255,255,0.5), rgba(0,0,0,0.5));
該代碼實現的效果為從半透明白色向半透明黑色漸變。
上一篇css循環跑馬燈