HTML文字显示如何添加投影效果？
在HTML开发里，有时为了突出显示效果，需要为一些标题文字添加投影效果。要实现这个效果，在以前的做法里，就是需要图片来完成，先用PS做一些有投影效果的文字，然后再放在html里显示出来。这样就太麻烦了，修改文字后，还需要重新做新的图片。
现在我们可以利用CSS3来为文字添加投影效果，如何操作？下面一起看下。
操作方法
- 01
首先看下我们的示例代码，很简单的html代码，一个p标签下有几个文字，然后用css样式定义了这些文字的样式：字体颜色和字体大小。代码如图
- 02
运行页面，看到没投影的字体显示如图。
- 03
要添加文字投影，我们可以为其加上样式：text-shadow: 2px 2px 3px #000，如图，
- 04
再次运行页面，可以得到有投影效果的文字了。
- 05
这个样式的数值具体是代表什么？我们可以先改变样式的前二个值，改成 text-shadow: 16px 16px 3px #000
- 06
再看下效果，如图。从图中我们就可以看出，样式前二个数值是对应文字投影的位置的，其中第一个数值是在x轴上的位置，值越大，投影的位置越往右靠；第二个数值是在y轴上的位置，值越大，投影的位置越往下靠。
- 07
第三个数值代表的是投影的模糊程度，值越小，就越清晰。比如把代码改成 text-shadow: 16px 16px 0 #000，效果如图，没有模糊度，和原版文字一样。
- 08
把模糊参数改大，text-shadow: 16px 16px 8px #000，效果如图，已经看不出投影的文字是什么了。
- 09
最后一个参数，不用解释，大家应该都知道是代表什么了，没错，就是投影的颜色，可以修改下这个参数，看下效果。text-shadow: 8px 9px 1px #cc0000
- 10
除了可以为文字添加一组投影效果外，其实我们在这个样式里，是可以为文字添加多组投影效果的，每一组用逗号隔开，代码如图。
- 11
运行页面，我们可以看到现在显示了二个投影，一个在文字上方，一个在文字下方。可以利用这个特性，为文字生成各种更炫的效果。
上一篇：MySql查询语句介绍，多表联合查询