Question

上一章，我们学习了一些简捷有效的CSS3技巧，対制作响应式设计很有帮助。另外还使用CSS3的@font-face规则为网页添加了自定义字体，使其视觉效果大大提升。此外还学习了CSS3中选择DOM元素的工具。在学习了这些基础知识之后，我们来看看CSS3的一些高级特性，这些特性能给我们的响应式设计带来显著的美学提升，而且大部分都不需要图片，能为我们节省宽带。

本章内容

使用CSS3制作文字阴影

使用CSS3制作盒阴影（即元素投影）

使用CSS3制作渐变背景

使用CSS3的多重背景图片

使用CSS3背景渐变来制作图案

使用CSS3的@font-face规则来制作节省带宽的图标

在此，我要重申一遍为什么CSS3对响应式设计非常有用：使用CSS3替代图片，在有带宽限制的网页中可有效减少http请求（从而使网页加载更快），并可使网页更灵活、更容易维护。这些优点甚至在传统的固定宽度桌面版网页中也很有用，但它们在响应式设计中更为重要，因此它们可以让网页在不同的视口中显示不同尺寸的模块或文字阴影，而不需要为此单独制作和导出图片。相信你肯定也这么想，那就开始吧。

浏览器私有前缀

在开发CSS3时，要记住添加相关的浏览器私有前缀以保证最广泛的浏览器兼容。除了这种方法，如果你愿意在代码中插入一点JavaScript，则可以考虑之前说过的-prefix-free脚本。该脚本会自动为CSS3规则追加浏览器私有前缀，这样你在样式表中就可以只写W3C规定的标准代码。该脚本地址为：http://leaverou.github.com/prefixfree/。