本书是一本注重实践的教程，作者为我们揭示了47个鲜为人知的CSS技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。

本书的读者对象为前端工程师、网页开发人员。

Lea Verou，W3C CSS工作组特邀专家，设计CSS语言的委员之一，此前曾在W3C担任开发者代言人。目前，她在麻省理工学院从事人机交互领域的研究。她还是一位博客作家，并经常在国际性技术会议上担任讲师；她创建的多个开源项目广受开发者欢迎。

CSS魔法，原名张鹏，国内知名CSS技术专家，百姓网前端架构师。拥有近十年的网站开发经验，在移动前端领域积累颇深，自称“披着工程师外衣的设计师”。他是CMUI、Action、GHX等开源项目的作者，曾为GitHub、Gulp、Stylus等网站和项目翻译过大量文档；其生动活泼、循序渐进的博客写作风格深受读者喜爱，在CSS Conf等技术会议上的演讲广受好评。

译者序  ix
序  xi
前言  xiii
致谢  xv
本书是怎样炼成的  xviii
关于本书  xx
第1章 引言  1
Web 标准：是敌还是友  2
CSS编码技巧  7
第2章 背景与边框  17
1 半透明边框  18
2 多重边框  20
3 灵活的背景定位  22
4 边框内圆角  25
5 条纹背景  27
6 复杂的背景图案  33
7 伪随机背景  43
8 连续的图像边框  46
第3章 形状  51
9 自适应的椭圆  52
10 平行四边形  57
11 菱形图片  60
12 切角效果  63
13 梯形标签页  71
14 简单的饼图  75
第4章 视觉效果  86
15 单侧投影  87
16 不规则投影  90
17 染色效果  93
18 毛玻璃效果  97
19 折角效果  105
第5章 字体排印  112
20 连字符断行  113
21 插入换行  115
22 文本行的斑马条纹  119
23 调整tab的宽度  121
24 连字  123
25 华丽的&  符号  125
26 自定义下划线  129
27 现实中的文字效果  132
28 环形文字  138
第6章 用户体验  143
29 选用合适的鼠标光标  144
30 扩大可点击区域  147
31 自定义复选框  149
32 通过阴影来弱化背景  153
33 通过模糊来弱化背景  157
34 滚动提示  159
35 交互式的图片对比控件  164
第7章 结构与布局  172
36 自适应内部元素  173
37 精确控制表格列宽  175
38 根据兄弟元素的数量来设置样式  178
39 满幅的背景，定宽的内容  182
40 垂直居中  185
41 紧贴底部的页脚  191
第8章 过渡与动画  195
42 缓动效果  196
43 逐帧动画  205
44 闪烁效果  209
45 打字动画  212
46 状态平滑的动画  217
47 沿环形路径平移的动画  221
按规范分类  230

CSS编码技巧：尽量减少代码重复

1.在实践中，代码可维护性的最大要素是尽量减少改动时要编辑的地方。

2.当某些值相互依赖时，应该把它们的相互关系用代码表达出来。

3.代码易维护和代码量少不可兼得。

4.我们还得到了一个特殊的颜色关键字 currentColor ，它是从SVG 那里借鉴来的。这个关键字并没有绑定到一个固定的颜色值，而是一直被解析为 color 。实际上，这个特性让它成为了 CSS 中有史以来的第一个变量 。虽然功能很有限，但它真的是个变量。

5.inherit 可以用在任何 CSS 属性中，而且它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。同样在有时候对于一些用于布局的元素可以使用 padding来将元素大小撑开，而不用显式地设置 width和 height。

traingle { position: relative; }
triangle:before{
    content: "";
    position: absolute;
    top: -.4em; left: 1em;
    padding: .35em;/*这里使用了padding使得元素具有了大小*/
    background: inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}