CSS漸變是一種在元素背景中混合兩種或多種顏色的方式,以創建平滑顏色的變化效果。W3C (World Wide Web Consortium)是一個開發 Web 技術標準的國際組織,為了實現標準化,W3C 規定了可以使用的 CSS 漸變屬性和值。
/* 線性漸變 */ background: linear-gradient(direction, color-stop1, color-stop2, ...); /* 徑向漸變 */ background: radial-gradient(shape size, start-color, ..., last-color); /* 比例漸變 */ background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...); /* 圓形比例漸變 */ background: repeating-radial-gradient(shape size, start-color, ..., last-color);
以上這幾種漸變屬性可以控制漸變方向、顏色停止點位置、形狀、大小以及重復方式。以下是一個示例使用線性漸變的代碼:
background: linear-gradient(to bottom right, #FFC0CB, #00FF00);
該代碼會將背景顏色從淺粉色漸變到綠色,方向從上到下右。為了實現更復雜的效果,可以在漸變中添加更多的顏色停止點和改變方向。
使用 W3C 規定的 CSS 漸變屬性和值可以創建非常漂亮的背景效果,應用場景非常廣泛,例如網站背景、按鈕、分割線等等。讓我們開發出更加炫麗的網頁吧!