[原]如何使用CSS3实现一个平滑的3D文本标题
iefreer发表于 2016-04-27 13:58:45
要实现3D文本，基本上有3种方法：
1. 使用CSS3的投影滤镜（filter: drop-shadow）
2. 使用3d建模和CSS3 3d变换来实现（最真实）
3. 使用CSS3 text-shadow属性来实现（最简单，可复制，现代浏览器都支持）
本例简单说明使用text-shadow属性来实现3D文本的原理和方法。
这依赖于text-shadow属性的两个特性：其1是该属性可以给文本添加投影效果，其2是可以在单个元素上应用多个投影效果。
先贴一张效果图预览下：
text-shadow的工作原理
我们看下下面这张图就明白了：
text-shadow的语法
text-shadow: h-shadow v-shadow blur color;
h-shadow是水平方向阴影位置，v-shadow是垂直阴影位置，blur是模糊度，color是阴影颜色
具体可参考W3School CSS3 参考手册：http://techbrood.com/cssref?p=css3-pr-text-shadow
具体实现代码
现在我们来构造叠加的阴影效果代码：
.text-3d {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}这个效果的细节是调试出来的，前面几个是投影拷贝，后面几个加上淡色调模糊效果，以使得阴影平滑过渡，填补锯齿。你可以使用踏得网的CSS3文本阴影在线生成工具来调试：http://techbrood.com/cg-text-shadow
上面的样式代码可以被复用到您自己的文本标题上。
你也可以自己在线试试看。