《响应式Web设计：HTML5和CSS3实践指南》——2.12节为字体添加阴影效果

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第2章，第2.12节为字体添加阴影效果，作者（美）　Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

2.12　为字体添加阴影效果
使用CSS3可以轻松地为文本添加阴影效果。既可为特定的元素添加高亮特效，也可应用于body文本段落中达到加强内容的视觉效果。除此之外，也能用来使文本链接更为突出。

2.12.1　准备工作
CSS3让这些变得简单，同时也不需要复杂的设置。打开你的开发环境或是记事本开始特效之旅。当然你也可以访问从Packet Publishing上本书页面获取完整的代码并看看它是如何实现的。

2.12.2　实现方式
首先，创建文本段落。记住，文本内容可以通过我们所喜爱的文本内容生成工具http://lipsum.com得到。现在给文本信息设置一个标题：

以上设置使得文本有一点点的阴影效果，似乎内容从页面中跳出一样。对于正文内容，该效果就已足够。但是对于链接元素来说还不够，还得添加不同层次的阴影特效，才能使链接更加突出。添加阴影的方法与前面的示例一样，只是在后面添加逗号，然后在逗号后面添加另外一个阴影特效。下面的例子给链接文本添加了浅蓝色的阴影效果。

2.12.3　工作原理
该方法是阴影特效的组合。可以通过将不同层次的阴影特效组合在一起产生逼真的3D效果。在此最好的方式就是应用不同的组合方式直到得到满意的3D特效。