1.1 DRY-(Don't repeat yourself)
** 知識儲備**
em(CSS2)-相對長度單位
如當前對行內文本的字體尺寸未被人為設置,em會繼承父級元素的字體大小box-shadow(CSS3)
參數(shù)：水平陰影的位置 垂直陰影的位置 模糊距離 陰影的尺寸 陰影的顏色 內部/外部text-shadow
水平陰影的位置 垂直陰影的位置 模糊的距離 陰影的顏色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與背景色產生了顏色沖突
解決思路：把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獲得更好的效果
其他效果
不同顏色和內容的按鈕
總結
DTY
do it now!
