css3漸變屬性有哪些
CSS3漸變屬性是CSS3規(guī)范中新增的一個(gè)屬性,它可以讓我們在網(wǎng)頁中制作出豐富的顏色漸變效果,為網(wǎng)頁增加更多的美感和視覺效果。下面,我們來介紹一下CSS3漸變屬性的具體內(nèi)容。
CSS3漸變屬性分為線性漸變和徑向漸變,其中線性漸變又分為水平方向和垂直方向。
一、線性漸變屬性
1、水平方向線性漸變
語法:background: linear-gradient(to right, #00FFFF, #FF00FF);
解析:to right表示從左往右漸變,#00FFFF和#FF00FF表示變化的顏色,可以設(shè)定多組色值。
2、垂直方向線性漸變
語法:background: linear-gradient(to bottom, #00FFFF, #FF00FF);
解析:to bottom表示從上往下漸變,#00FFFF和#FF00FF表示變化的顏色,可以設(shè)定多組色值。
二、徑向漸變屬性
徑向漸變的語法寫法和線性漸變類似,也有兩類:半徑的長度值和兩個(gè)位置關(guān)鍵字。其中,第一個(gè)位置關(guān)鍵字表示圓心,x軸方向左為負(fù)值,右為正值,y軸方向上為負(fù)值,下為正值;第二個(gè)位置關(guān)鍵字表示漸變的開始位置,其值的規(guī)則與第一個(gè)位置關(guān)鍵字相同。
1、半徑的長度值
語法:background: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF, #FF00FF);
解析:ellipse表示為橢圓形,farthest-corner表示為最遠(yuǎn)角,45px和45px為圓心坐標(biāo),#00FFFF和#FF00FF表示漸變的顏色,可以設(shè)定多組色值。
2、兩個(gè)位置關(guān)鍵字
語法:background: radial-gradient(at top left, #00FFFF, #FF00FF);
解析:at top left表示漸變中心在左上角,#00FFFF和#FF00FF表示變化的顏色,可以設(shè)定多組色值。