您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css中顏色漸變的實現(xiàn)方法有哪些,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
!!注意IE9及之前的版本不支持漸變。Safari要加-webkit-的前綴,Opera要加-o-的前綴,F(xiàn)irefox要加-moz-的前綴!
一、Linear Gradients(線性漸變)-向下/向上/向左/向右/對角方向
1.向下代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>漸變學(xué)習(xí)</title> <style> div{ width:200px; height:200px; } .gradient{ background:-webkit-linear-gradient(#8A2BE2,#DC143C);/*for safari5.1-6.0*/ background:-o-linear-gradient(#8A2BE2,#DC143C);/*Opera 11.1-12.0*/ background:-moz-linear-gradient(#8A2BE2,#DC143C);/*firefox 3.6-15*/ background:linear-gradient(#8A2BE2,#DC143C);/*標(biāo)準(zhǔn)語法,必須放在最后*/ } </style> </head> <body> <div class="gradient"></div> </body> </html>
運(yùn)行效果:
2.向上,換向下漸變的兩個顏色順序即可。替換上面代碼運(yùn)行結(jié)果為:
3.向左代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>漸變學(xué)習(xí)</title> <style> div{ width:200px; height:200px; } .gradient{ background:-webkit-linear-gradient(left,#8A2BE2,#DC143C);/*for safari5.1-6.0*/ background:-o-linear-gradient(right,#8A2BE2,#DC143C);/*Opera 11.1-12.0*/ background:-moz-linear-gradient(right,#8A2BE2,#DC143C);/*firefox 3.6-15*/ background:linear-gradient(to right,#8A2BE2,#DC143C);/*標(biāo)準(zhǔn)語法*/ } </style> </head> <body> <div class="gradient"></div> </body> </html>
運(yùn)行結(jié)果:
注意:從左到右漸變,標(biāo)準(zhǔn)寫法在向下漸變的括號內(nèi)加上方向詞to right;其中safari5.1-6.0加left;Opera11.1-12和firefox3.6-15加right;按以上代碼中的瀏覽器順序(標(biāo)準(zhǔn)語法必須放在最后?。。┛梢运儆洖榈谝豁棇憦淖箝_始,后面三項寫到右結(jié)束。
4.從右到左,在從左到右的漸變代碼上修改方向詞得到效果圖:
5.對角方向
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>漸變學(xué)習(xí)</title> <style> div{ width:200px; height:200px; } .gradient{ background:-webkit-linear-gradient(left top,#8A2BE2,#DC143C);/*for safari5.1-6.0*/ background:-o-linear-gradient(bottom right,#8A2BE2,#DC143C);/*Opera 11.1-12.0*/ background:-moz-linear-gradient(bottom right,#8A2BE2,#DC143C);/*firefox 3.6-15*/ background:linear-gradient(to bottom right,#8A2BE2,#DC143C);/*標(biāo)準(zhǔn)語法*/ } </style> </head> <body> <div class="gradient"></div> </body> </html>
運(yùn)行結(jié)果:
注意:方向詞寫法遵循上下左右的按瀏覽器順序第一項寫起始位置,后三項寫到達(dá)位置,第四項為標(biāo)準(zhǔn)項要加to;要注意的是左上left top 對應(yīng)的到達(dá)項為bottom right。
二、角度漸變
1、以上上下左右對角漸變通通可以通過角度漸變寫出來。在表示顏色的括號第一項加上角度比如0deg,45deg,90deg,180deg等角度即可。
2、角度是指漸變方向和水平線之間的角度,逆時針方向計算,比如:0deg是指從下到上的漸變,90deg是指從左到右的漸變。
3、對于Chrome,Safari,F(xiàn)irefox等換算公式為90-x=y,X為標(biāo)準(zhǔn)度數(shù)。
三、多個顏色節(jié)點:即在表示方向顏色的括號里加多幾種顏色就好,寫法還是遵循以上先寫方向再寫顏色。
四、帶有透明度的漸變:即用rgba(0,0,0,0.2)表示顏色,其中0.2表示透明度。
五、重復(fù)的線性漸變:用repeating-linear-gradient()函數(shù),括號內(nèi)每個顏色規(guī)定漸變比例。
六、Radial Gradient徑向漸變
1、徑向漸變:可以指定漸變的中心,形狀(圓形circle或橢圓),大小size(closest-side;farthest-side;closest-coner;farthest-corner)。默認(rèn)中心為center,形狀為ellipse(橢圓),漸變大小是farthest-corner(到最遠(yuǎn)角落)。語法:background:-radial-gradient(center,shape,size,start-color,...,last-clor)。
2、顏色節(jié)點不均勻分布的徑向漸變:即規(guī)定每個顏色不通的比例。
3、重復(fù)的徑向漸變:使用repeating-radial-gradient()函數(shù)。每個顏色設(shè)置比例。
關(guān)于css中顏色漸變的實現(xiàn)方法有哪些就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。