Css3: gradient背景漸變??

原文鏈接：http://kk073000.blog.163.com/blog/static/34826942012123111322691/

css3實(shí)現(xiàn)了背景漸變。
<gradient> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]
一：線性漸變?? 詳細(xì)：http://dev.w3.org/csswg/css3-images/#gradients
在CSS3中，可以使用 linear-gradient實(shí)現(xiàn)背景線性漸變。
<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ ) <side-or-corner> = [left | right] || [top | bottom]
在ff瀏覽器時(shí)需要將樣式代碼書(shū)寫(xiě)成"-moz-linear-gradient",chrome瀏覽器時(shí)需要寫(xiě)成"-webkit-linear-gradient"的形式。

這里顏色值也可以分好多段，如1-2

?
1-1 :background-image: linear-gradient(top, #eff6fb, #d3e4f3 68%);如：


1-2：
background-image: linear-gradient( left, #FF0000, #FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%);
?顯示效果：


?

1-3：
漸變方向也指定關(guān)鍵字。
background-image: linear-gradient(top left, #eff6fb 10%, #d3e4f3 68%);效果：


1-4：漸變方向也可以指定角度。
background-image: linear-gradient(0deg, #eff6fb 10%, #d3e4f3 68%);0deg漸變開(kāi)始在左側(cè)，90deg的底部，180deg在右側(cè)，270deg在頂部。因此，我們可以認(rèn)為角度作為反??時(shí)針順序。
如:


1-5：透明度(Transparency)：還支持透明漸變。這是相當(dāng)有用的，例如，當(dāng)堆疊多個(gè)背景時(shí)。這里是兩個(gè)背景的結(jié)合：一張圖片，一個(gè)白色到透明的線性漸變。

二：徑向漸變

徑向漸變類(lèi)似于線性漸變
<radial-gradient> = radial-gradient( [ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )
1.顏色
2-1：直接定義顏色漸變。
background: -moz-radial-gradient(red, yellow, #1E90FF); 效果如圖：
2-2：指定位置顏色的漸變：background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%); ?效果如果： ?2.形狀
2-3：起始位置一樣，形狀不一樣。

background-image: -moz-radial-gradient(bottom left,circle,red, yellow, #1E90FF);?

background-image: -moz-radial-gradient(bottom left,ellipse,red, yellow, #1E90FF);
效果如圖：


3.大小(Size)：size的不同選項(xiàng)(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用來(lái)定義圓或橢圓大小的點(diǎn)。
三：重復(fù)漸變(Repeating Gradients)
重復(fù)一個(gè)漸變，可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。 .repeating_radial_gradient_example { background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); } .repeating_linear_gradient_example { background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Css3: gradient背景渐变的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。