主要涉及三個點：漸變、陰影、data-icon。本着輕博客，每天輕鬆一個點的原則，將分三篇進行。^v^這一篇是漸變篇。本文以webkit核心瀏覽器爲例，各個瀏覽器支持情況如下圖：
1.webkit核心瀏覽器下的的基本語法如下：
-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)參數
| 參數類型 | 簡要說明 |
|---|---|
| type | 漸變的類型，可以是線性漸變(linear)或是徑向漸變(radial) |
| start_point | 漸變圖像中漸變的起始點 |
| end_point | 漸變圖像中漸變的結束點 |
| stop | color-stop()方法，指定漸變進程中特定點的特定顏色 |
| inner_center | 內部中心點，徑向漸變起始圓環 |
| inner_radius | 內部半徑，徑向漸變起始圓 |
| outer_center | 外部漸變結束圓的中心點 |
| outer_radius | 外部漸變結束圓的半徑 |
這個demo中兩種漸變均有用到。
2.線性漸變
圖中紅線內部分是爲了讓了button更立體，代碼如下：
a:after {
content: "";
background-image: -webkit-gradient(linear, 0% 0, 100% 0, from(rgba(255, 255, 255, .55)),
to(rgba(255, 255, 255, .5)), color-stop(.5, rgba(255, 255, 255, 0)),
color-stop(.8, rgba(255, 255, 255, 0)));
}
沿着X軸的線性漸變,起始點爲(0%,0)，終止點爲(100%,0)。顏色從rgba(255, 255, 255, .55)漸變到rgba(255, 255, 255, .5)。 rgba(255, 255, 255, .55)中0.55代表着透明度，從0到1爲全透明到不透明。中間有兩個stop點，在這兩個點爲全透明。
color-stop()就是過渡點，這些過渡點有兩個參數，一個是點的位置，另外一個是過渡點的顏色。爲了看的更明顯，我將兩個stop點的顏色改變如下：
background-image: -webkit-gradient(linear, 0% 0, 100% 0, from(rgba(255, 255, 255, .55)),
to(rgba(255, 255, 255, .5)), color-stop(.5, rgba(0, 255, 255, 1)),
color-stop(.8, rgba(255, 0, 255, 1)));
3.徑向漸變
demo中下圖紅色框內使用了徑向漸變，另外一幅圖爲取消漸變的效果圖，可以看出漸變使我們的button看起來像果凍一樣q。
background-image: -webkit-gradient(radial, 50% 0, 0, 50% 0, 100,
from( rgba(255,255,255,0) ),
to( rgba(255,255,255,0.7) ));漸變範圍爲從圓心爲(50%,0)，半徑爲0的內圓到圓心也是(50%,0)，半徑爲100的圓。爲了看的更明顯，我將漸變顏色值改變如下：
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0,
from( rgba(0,255,255,1) ),
to( rgba(255,255,0,1) ));
demo戳這裏：http://runjs.cn/detail/lchdzux7