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
运行页面,我们可以看到现在显示了二个投影,一个在文字上方,一个在文字下方。可以利用这个特性,为文字生成各种更炫的效果。