HTML文字显示如何添加投影效果？

在HTML开发里，有时为了突出显示效果，需要为一些标题文字添加投影效果。要实现这个效果，在以前的做法里，就是需要图片来完成，先用PS做一些有投影效果的文字，然后再放在html里显示出来。这样就太麻烦了，修改文字后，还需要重新做新的图片。<br/>现在我们可以利用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
运行页面，我们可以看到现在显示了二个投影，一个在文字上方，一个在文字下方。可以利用这个特性，为文字生成各种更炫的效果。
End

发表于 2017-10-23 00:00
阅读 ( 1115 )
分类：电脑网络

HTML文字显示如何添加投影效果？

操作方法

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

推荐文章