CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 分為線性漸變(linear-gradient)、徑向漸變(radial-gradient)。
為了創建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。 同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。
默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
請看以下說明：
圖1
我們來舉例子：
使用如下代碼
效果如下圖：
看起來像不像吊燈
當然，我們可以通過改變參數值來觀察其變化，具體取值可以參考圖1.
上述例子中，background 取值為 -webkit-radial-gradient(ellipse,yellow 1%,#fff 29%,gray 20%,black 50%);
我們接下來看一下 ellipse 和 顏色比例 取不同值的變化。
ellipse不同值產生的影響
接下來我們創建5個大小相同的DIV，分別對ellpise取不同值來觀察其變化，代碼如下：
效果如下：
然後我們再來看顏色比例不同產生的影響：
上面例子中，我們徑向漸變採用的顏色分別是 黃，白，灰，黑
我們設定一個初始值 黃（1%） 白（20%） 灰（30%） 黑（59%）。
為了看起來明顯，然後通過不斷改變黃和黑的比例，代碼如下：
然後來看效果圖：
其實不難觀察出，比圖即代表改顏色在圖中所佔的比例。通過觀察，我們可以看到，從裡到外顏色比例按照從小到大的順序來寫，其效果越好看。
分享到:
閱讀更多 好奇驅動探索 的文章
