如何使用CSS3实现一个平滑的3D文本标题

要实现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

上面的样式代码可以被复用到您自己的文本标题上。

你也可以 自己在线试试看。

by iefreer