Css3: gradient背景漸變??

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

css3實現了背景漸變。
<gradient> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]
一：線性漸變?? 詳細：http://dev.w3.org/csswg/css3-images/#gradients
在CSS3中，可以使用 linear-gradient實現背景線性漸變。
<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ ) <side-or-corner> = [left | right] || [top | bottom]
在ff瀏覽器時需要將樣式代碼書寫成"-moz-linear-gradient",chrome瀏覽器時需要寫成"-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：
漸變方向也指定關鍵字。
background-image: linear-gradient(top left, #eff6fb 10%, #d3e4f3 68%);效果：


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


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

二：徑向漸變

徑向漸變類似于線性漸變
<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的不同選項(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用來定義圓或橢圓大小的點。
三：重復漸變(Repeating Gradients)
重復一個漸變，可以使用-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); } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。