1.1 DRY-(Don't repeat yourself)

** 知識儲備**

1. em(CSS2)-相對長度單位
   如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置,em會繼承父級元素的字體大小

2. box-shadow(CSS3)
   參數(shù)：水平陰影的位置 垂直陰影的位置 模糊距離 陰影的尺寸 陰影的顏色 內(nèi)部/外部

3. text-shadow
   水平陰影的位置 垂直陰影的位置 模糊的距離 陰影的顏色

4. linear-gradient-用線性漸變創(chuàng)建圖像（background-image）
   參數(shù)： 漸變角度 顏色值 截止百分比，....

代碼要維持DRY
代碼要易維護（要素：把修改所需的編輯次數(shù)降到最低）

代碼示例1

Button1樣式

padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb,#58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;

Button2樣式

padding: .3em .8em;   
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb,#58a);            
border-radius: .2em; 
box-shadow: 0 .5em .5em gray; 
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;

實現(xiàn)同樣的效果
區(qū)別：當改變字體時僅需要改變 父級/本身 字體大小（易維護性）

按鈕樣式

如何做得更好？

當我們改變背景色后，突兀的的情況出現(xiàn)了（這里將box-shadow放大）

按鈕樣式

很明顯，box-shadow與背景色產(chǎn)生了顏色沖突
解決思路：把shadow變成半透明的淡黑/淡白色

代碼示例2

padding: .3em .8em;
border: 1px solid rgba(0,0,0,0.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .5em .5em rgba(0,0,0,0.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,0.5);
font-size: 125%;
line-height: 1.5;

**rgba(0,0,0,0.1)
linear-gradient(hsla(0,0%,100%,.2),transparent) **

按鈕樣式

我們可以獲得更加自然的陰影色
Tips 這里可以適當縮小box-shadow獲得更好的效果

其他效果

不同顏色和內(nèi)容的按鈕

總結(jié)

DTY
do it now!