環形漸變可以給網站和應用程序增添一份微妙的美感和魅力。而在 CSS 中,我們可以使用 radial-gradient 函數來實現環形漸變。
background: radial-gradient(circle at center, #ffffcc 0%, #336666 100%);
上述代碼將創建一個從 #ffffcc 到 #336666 的顏色漸變。使用 circle 關鍵詞可以指定漸變為圓形,而使用 at center 可以讓漸變從元素中心開始。
background: radial-gradient(ellipse closest-side at center, #ffcccc 0%, #990000 100%);
在這個代碼中,我們使用 ellipse 關鍵詞將漸變形狀變成了橢圓,而 closest-side 關鍵詞可以將漸變與元素最近的邊緣對齊。這個漸變的起點和終點顏色分別為 #ffcccc 和 #990000。
background: radial-gradient(circle farthest-corner at bottom right, #99ccff 0%, #003399 100%);
在這個代碼中,我們使用 farthest-corner 關鍵詞將漸變的起點定義在元素的右下角,而終點處的顏色為 #003399。
環形漸變可以讓設計變得更加充滿活力和創意,可以嘗試不同的漸變形狀、位置和顏色來實現自己想要的視覺效果。