[前端小部落格]做一個萌萌噠的button之漸變
阿新 • • 發佈：2019-01-24
主要涉及三個點：漸變、陰影、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 沿著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) ));
