CSS漸變是一種在元素背景中混合兩種或多種顏色的方式,以創(chuàng)建平滑顏色的變化效果。W3C (World Wide Web Consortium)是一個(gè)開發(fā) Web 技術(shù)標(biāo)準(zhǔn)的國際組織,為了實(shí)現(xiàn)標(biāo)準(zhǔn)化,W3C 規(guī)定了可以使用的 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);
以上這幾種漸變屬性可以控制漸變方向、顏色停止點(diǎn)位置、形狀、大小以及重復(fù)方式。以下是一個(gè)示例使用線性漸變的代碼:
background: linear-gradient(to bottom right, #FFC0CB, #00FF00);
該代碼會將背景顏色從淺粉色漸變到綠色,方向從上到下右。為了實(shí)現(xiàn)更復(fù)雜的效果,可以在漸變中添加更多的顏色停止點(diǎn)和改變方向。
使用 W3C 規(guī)定的 CSS 漸變屬性和值可以創(chuàng)建非常漂亮的背景效果,應(yīng)用場景非常廣泛,例如網(wǎng)站背景、按鈕、分割線等等。讓我們開發(fā)出更加炫麗的網(wǎng)頁吧!