《响应式Web设计：HTML5和CSS3实践指南》——2.7节使用CSS3制作3D文本

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第2章，第2.7节使用CSS3制作3D文本，作者（美）　Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

2.7　使用CSS3制作3D文本
在前几节中，我们使用画布元素创建了投影、斜面以及内侧阴影。使用CSS3可以让文本真的站起来。使用CSS3的text-shadow属性，可以让文本看起来好像伸出屏幕来面对用户。

2.7.1　准备工作
如果你想直接跳过本节，你可以从Packt Publishing的网站上下载代码。否则，如果你想边学边做，那就一起来创建属于你自己的3D文本吧。下面将通过组合多个CSS3的阴影效果来实现3D特效。

2.7.2　实现方式
在IDE中，创建一个在body元素中只有一个header元素的HTML文档。在head标签中设置一些样式，并给header元素设置color: #f0f0f0;，如下面代码片段所示：

2.7.3　工作原理
尽情试验和体验本方法的不同组合方式，来实现那些令人欢呼的字体效果。CSS3将字体设计带到了一个全新水平，而之前要想达到如此深度的定制特效却总是苦难的事情。CSS3不仅做到了，并且做得很好。
text-shadow属性可以处理大量的阴影属性。因此，你可以把这些阴影按照与文本之间的距离依次堆叠起来。随之而来的，你的文本拥有了3D特效。