CSS 中徑向漸變是一種常見的背景樣式,可以讓網頁更加美觀。徑向漸變就是一種顏色從中心向外逐漸變化的樣式。在 CSS 中,我們可以通過使用
radial-gradient()函數來創建徑向漸變,它包括以下屬性:
background: radial-gradient( [形狀關鍵字] [定位圓心關鍵字]? [圓形尺寸關鍵字]?, [顏色和位置][, 顏色和位置]* );
其中,
[形狀關鍵字]可選擇的有 circle(圓形)和 ellipse(橢圓形)兩種,
[定位圓心關鍵字]可以包括關鍵字 at,top,bottom,left,right 和 center,并且可以用百分比或長度表示定位,
[圓形尺寸關鍵字]可以選擇 closest-side,farthest-side,closest-corner 和 farthest-corner 四種形式。
下面是一個徑向漸變的例子:
background: radial-gradient(circle at 50% 50%, #ff0000, #00ff00, #0000ff);
上面的代碼表示在中心位置創建一個圓形的徑向漸變,顏色從紅色、綠色、藍色逐漸變化。如果想讓顏色從內到外徑向漸變,可以添加百分比或長度來調整邊界:
background: radial-gradient(circle at 50% 50%, #ff0000 0%, #00ff00 50%, #0000ff 100%);
這樣就可以讓紅色從中心出發,綠色從中心向外擴散,藍色填充整個背景。