1.导论——CSS编写技巧1

1.1 DRY-(Don't repeat yourself)

---

** 知识储备**

1. em(CSS2)-相对长度单位
   如当前对行内文本的字体尺寸未被人为设置,em会继承父级元素的字体大小

2. box-shadow(CSS3)
   参数：水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 内部/外部

3. text-shadow
   水平阴影的位置 垂直阴影的位置 模糊的距离 阴影的颜色

4. linear-gradient-用线性渐变创建图像（background-image）
   参数： 渐变角度 颜色值 截止百分比，....

---

代码要维持DRY
代码要易维护（要素：把修改所需的编辑次数降到最低）

代码示例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;

---

实现同样的效果
区别：当改变字体时仅需要改变 父级/本身 字体大小（易维护性）

按钮样式

如何做得更好？

当我们改变背景色后，突兀的的情况出现了（这里将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!