好程式員web前端教程之CSS3漸變,CSS3漸變(gradient)可以讓你在兩個或多個指定的顔色之間顯示平穩的過渡。 以前,你必須使用圖像來實作這些效果,現在通過使用 CSS3 的漸變(gradients)即可實作。此外,漸變效果的元素在放大時看起來效果更好,因為漸變(gradient)是由浏覽器生成的。
1、線性漸變
文法:background: linear-gradient(direction, color-stop1, color-stop2, ...);說明:direction:預設為to bottom,即從上向下的漸變;
stop:顔色的分布位置,預設均勻分布,例如有3個顔色,各個顔色的stop均為33.33%。
示例1:to left、top right、to bottom、to top
div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } / 浏覽器預設值 /
div { background:linear-gradient(to top, red , blue) }
分别産生“從右到左”、“從左到右”、“從上到下”、“從下到上”的“紅色–綠色”漸變
示例2:to right bottom、to right top、to left bottom、to left top
div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }
分别産生到“右下角”、“右上角”、“左下角”、“左上角”的漸變
示例3:使用角度漸變
div { background: linear-gradient(10deg, red, blue) }
2、徑向漸變
徑向漸變不同于線性漸變,線性漸變是從“一個方向”向“另一個方向”的顔色漸變,而徑向漸變是從“一個點”向四周的顔色漸變
文法:background: radial-gradient(center, shape, size, start-color, ..., last-color);說明:center:漸變起點的位置,可以為百分比,預設是圖形的正中心。
shape:漸變的形狀,ellipse表示橢圓形,circle表示圓形。預設為ellipse,如果元素形狀為正方形的元素,則ellipse和circle顯示一樣。
size:漸變的大小,即漸變到哪裡停止,它有四個值。 closest-side:最近邊;
farthest-side:最遠邊; closest-corner:最近角; farthest-corner:最遠角
示例1:多顔色點均勻分布
div { background: radial-gradient(red, green, blue); }
以中心(50% 50%)為起點,到最遠角(farthest-corner),從red到green、blue的均勻漸變
EG:div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 或 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }
示例2:多顔色節點不均勻分布
div { background: radial-gradient(red 5%, green 15%, blue 60%); }
示例3:設定漸變形狀
div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }
circle:漸變為最大的圓形; ellipse:根據元素形狀漸變,元素為正方形是顯示效果與circle無異。
示例4:不同尺寸的漸變
size指定了漸變的大小,即漸變到哪裡停止,它有四個值。
closest-side:最近邊; farthest-side:最遠邊; closest-corner:最近角; farthest-corner:最遠角
div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }
3、重複漸變
(1)重複性線性漸變
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
說明:10%的位置為yellow,20%的位置為green,然後按照這20%向下重複
(2)重複性徑向漸變
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }