CSS3：radial-gradient，徑向漸變的使用方法

語法

徑向漸變不一樣於線性漸變，線性漸變是從「一個方向」向「另外一個方向」的顏色漸變，而徑向漸變是從「一個點」向四周的顏色漸變。其語法以下：

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的均勻漸變，效果以下圖：

完整的代碼能夠寫成：

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：設置漸變形狀

shape 參數定義了形狀。它能夠是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。

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); }

效果圖以下，分別用「紅色」描出了不一樣屬性指定的漸變終點：

例5：重複性漸變

repeating-radial-gradient() 函數用於重複徑向漸變

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

效果圖以下：

參考文章：CSS3 漸變（Gradients）、CSS3 Gradient_gradient, css3屬性詳解