CSS Secrets
原封不动的实现了这本书上面的所有示例，因为作者书中的实例地址是在dabblet.com上，但是该网站很不稳定，经常爆炸，所以就花了一些时间搞了一下（代码基本一致，有些文字我翻译成了中文，同时将图片放在了本地，防止被墙）
这本书是目前为止(2017-7-17)我看过的信息量最大的CSS书籍，强烈推荐有一定CSS基础的前端开发好好研究一下这本书
![[CSS Secrets 简体中文版 - 封面]](https://cloud.githubusercontent.com/assets/1231359/14773652/5bf7c006-0adf-11e6-8712-70be89b3b97d.jpg)
关于此书
目录
和书中的章节顺序保持一致，同时命名也和英文原版保持一致，中间以”-“连接，可以直接点击链接看效果：
背景与边框(Backgrounds & Borders)
- 半透明边框(Translucent borders)
- 多重边框(Multiple borders)
- 灵活的背景定位(Flexible background positioning)
- 边框内圆角(Inner rounding)
- 条纹背景(Striped backgrounds)
- 复杂的背景图案(Complex background patterns)
- 伪随机背景(Pseudo random backgrounds)
- 连续的图像边框(Continuous image borders)
形状(Shapes)
- 自适应的椭圆(Flexible sllipses)
- 平行四边形(Parallelograms)
- 菱形图片(Diamond images)
- 切角效果(Cutout corners)
- 梯形标签页(Trapezoid tabs)
- 简单的饼图(Simple pie charts)
视觉效果(Visual Effects)
- 单侧投影(One-sided shadows)
- 不规则投影(Irregular drop shadows)
- 染色效果(Color tinting)
- 毛玻璃效果(Frosted glass effect)
- 折角效果(Folded corner effect)
字体排印(Typography)
- 连字符断行(Hyphenation)
- 插入换行(Inserting line breaks)
- 文本行的斑马条纹(Zebra-striped text lines)
- 调整tab的宽度(Adjusting tab width)
- 连字(Ligatures)
- 华丽的&符号(Fancy ampersands)
- 自定义下划线(Custom underlines)
- 现实中的文字效果(Realistic text effects)
- 环形文字(Circular text)
用户体验(User Experience)
- 选用合适的鼠标光标(Picking the right cursor)
- 扩大可点击区域(Extending the clickable area)
- 自定义复选框(Custom checkboxes)
- 通过阴影来弱化背景(De-emphasize by dimming)
- 通过模糊来弱化背景(De-emphasize by blurring)
- 滚动提示(Scrolling hints)
- 交互式的图片对比控件(Interactive image comparsion)
结构与布局(Structure & Layout)
- 自适应内部元素(Intrinsic sizing)
- 精确控制表格列宽(Taming table column widths)
- 根据兄弟元素的数量来设置样式(Styling by sibling count)
- 满幅的背景，定宽的内容(Fluid background,fixed content)
- 垂直居中(Vertical centering)
- 紧贴底部的页脚(Sticky footers)
过渡与动画(Transitions & Animations)
- 缓动效果(Elastic transitions)
- 逐帧动画(Frame-by-frame animations)
- 闪烁效果(Blinking)
- 打字动画(Typing animation)
- 状态平滑的动画(Smooth state animations)
- 沿环形路径平移的动画(Animation along a circular path)