好程式設計師web前端分享CSS3 漸變

好程式設計師 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%); }