css3中漸變屬性有l(wèi)inear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。詳細(xì)介紹:1、linear-gradient,線性漸變,可以沿著一條直線方向進(jìn)行漸變,可以指定漸變的起始點(diǎn)和結(jié)束點(diǎn),以及每個(gè)顏色停止點(diǎn)的位置和顏色等等。
CSS3中的漸變屬性可以通過指定起始顏色和結(jié)束顏色之間的過渡來創(chuàng)建平滑的顏色過渡效果。以下是CSS3中常用的漸變屬性:
1. linear-gradient:線性漸變,可以沿著一條直線方向進(jìn)行漸變。可以指定漸變的起始點(diǎn)和結(jié)束點(diǎn),以及每個(gè)顏色停止點(diǎn)的位置和顏色值。
例如,創(chuàng)建一個(gè)從紅色到藍(lán)色的線性漸變可以使用以下代碼:
background: linear-gradient(red, blue);
登錄后復(fù)制
2. radial-gradient:徑向漸變,可以從一個(gè)中心點(diǎn)向外輻射進(jìn)行漸變。可以指定漸變的起始中心點(diǎn)和結(jié)束中心點(diǎn),以及每個(gè)顏色停止點(diǎn)的位置和顏色值。
例如,創(chuàng)建一個(gè)從中心向外輻射的徑向漸變可以使用以下代碼:
background: radial-gradient(circle, red, blue);
登錄后復(fù)制
3. conic-gradient:圓錐漸變,可以沿著一個(gè)圓錐形進(jìn)行漸變。可以指定漸變的起始角度和結(jié)束角度,以及每個(gè)顏色停止點(diǎn)的位置和顏色值。
例如,創(chuàng)建一個(gè)從紅色到藍(lán)色的圓錐漸變可以使用以下代碼:
background: conic-gradient(red, blue);
登錄后復(fù)制
4. repeating-linear-gradient:重復(fù)線性漸變,可以在指定的區(qū)域內(nèi)重復(fù)應(yīng)用線性漸變。可以指定漸變的起始點(diǎn)和結(jié)束點(diǎn),以及每個(gè)顏色停止點(diǎn)的位置和顏色值。
例如,創(chuàng)建一個(gè)從紅色到藍(lán)色的重復(fù)線性漸變可以使用以下代碼:
background: repeating-linear-gradient(red, blue);
登錄后復(fù)制
5. repeating-radial-gradient:重復(fù)徑向漸變,可以在指定的區(qū)域內(nèi)重復(fù)應(yīng)用徑向漸變。可以指定漸變的起始中心點(diǎn)和結(jié)束中心點(diǎn),以及每個(gè)顏色停止點(diǎn)的位置和顏色值。
例如,創(chuàng)建一個(gè)從中心向外輻射的重復(fù)徑向漸變可以使用以下代碼:
background: repeating-radial-gradient(circle, red, blue);
登錄后復(fù)制
除了以上幾種常用的漸變屬性外,CSS3還提供了一些其他的漸變屬性,如漸變的角度、漸變的形狀等。可以根據(jù)具體需求選擇適合的漸變屬性來實(shí)現(xiàn)所需的效果。