CSS3 漸變
CSS3 漸變(gradient)可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。 以前缴川，你必須使用圖像來實(shí)現(xiàn)這些效果茉稠，現(xiàn)在通過使用 CSS3 的漸變(gradients)即可實(shí)現(xiàn)。此外把夸，漸變效果的元素在放大時看起來效果更好而线，因?yàn)闈u變(gradient)是由瀏覽器生成的。
1恋日、線性漸變
語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);說明：direction：默認(rèn)為to bottom膀篮，即從上向下的漸變;
stop：顏色的分布位置，默認(rèn)均勻分布岂膳，例如有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) } /* 瀏覽器默認(rèn)值 */
div { background:linear-gradient(to top, red , blue) }
分別產(chǎn)生“從右到左”活孩、“從左到右”、“從上到下”嫂丙、“從下到上”的“紅色–綠色”漸變
示例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); }
分別產(chǎn)生到“右下角”诽表、“右上角”、“左下角”隅肥、“左上角”的漸變
示例3：使用角度漸變
div { background: linear-gradient(10deg, red, blue) }
2竿奏、徑向漸變
徑向漸變不同于線性漸變，線性漸變是從“一個方向”向“另一個方向”的顏色漸變腥放，而徑向漸變是從“一個點(diǎn)”向四周的顏色漸變
語法：background: radial-gradient(center, shape, size, start-color, ..., last-color);說明：center：漸變起點(diǎn)的位置泛啸，可以為百分比，默認(rèn)是圖形的正中心秃症。
shape：漸變的形狀候址，ellipse表示橢圓形吕粹，circle表示圓形。默認(rèn)為ellipse岗仑，如果元素形狀為正方形的元素匹耕，則ellipse和circle顯示一樣。
size：漸變的大小荠雕，即漸變到哪里停止稳其，它有四個值。 closest-side：最近邊;
farthest-side：最遠(yuǎn)邊; closest-corner：最近角; farthest-corner：最遠(yuǎn)角
示例1：多顏色點(diǎn)均勻分布
div { background: radial-gradient(red, green, blue); }
以中心(50% 50%)為起點(diǎn)炸卑，到最遠(yuǎn)角(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：多顏色節(jié)點(diǎn)不均勻分布
div { background: radial-gradient(red 5%, green 15%, blue 60%); }
示例3：設(shè)置漸變形狀
div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }
circle：漸變?yōu)樽畲蟮膱A形; ellipse：根據(jù)元素形狀漸變矾兜，元素為正方形是顯示效果與circle無異损趋。
示例4：不同尺寸的漸變
size指定了漸變的大小，即漸變到哪里停止椅寺，它有四個值浑槽。
closest-side：最近邊; farthest-side：最遠(yuǎn)邊; closest-corner：最近角; farthest-corner：最遠(yuǎn)角
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、重復(fù)漸變
(1)重復(fù)性線性漸變
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
說明：10%的位置為yellow返帕，20%的位置為green桐玻，然后按照這20%向下重復(fù)
(2)重復(fù)性徑向漸變
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
