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

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

(0)

相关推荐

  • 如何给英语听力音频加上文字显示(字幕)?

    英语听力音频文件没有文字显示,这是很多老师们苦恼的问题,而这一篇文章就告诉老师们如何给英语听力加上文字显示(字幕). 解决思路:使用通用的LRC歌词文件,这种歌词文件可以实时同步显示歌词,也可以用到英 ...

  • 如何解决word中的表格中的文字显示不全的问题

    我们使用word编辑文档的时候,会在文档当中添加表格,并且还会在表格中写入文字,但是当我们写好文字的时候,表格内无法将文字显示完全,那么这样的问题该怎么解决了? 操作方法 01 首先就是打开表格显示不 ...

  • 视频画面加文字并控制文字显示时间

    在上传自己拍摄或编辑视频的时候往往会想到说在视频画面上加上自己的联系方式.微信或图片logo.如果仅仅是在视频画面上添加文字或图片不免会觉得单调,那其实还可以在给视频添加文字的同时来添加相应的特效.比 ...

  • 如何使用PS为字体添加投影效果

    我们有时候希望给文字添加阴影效果,此时我们可能会选择复制一个新的图层来进行制作投影效果.不过这通常不是很好控制,步骤也会明显增多.那么下面我来学习如何使用PS快速为字体添加投影效果! 操作方法 01 ...

  • 手机cad快速看图显示不全怎么办(建筑图纸cad打开后文字显示不全)

    有些小伙伴在使用CAD手机看图软件查看图纸的过程中,发现CAD图纸中有部分文字显示为"?",就像下图这样,这是怎么回事呢?遇到这种问题该如何解决呢?接下来给大家分享一下CAD手机看 ...

  • PowerPoint文字显示紧密的处理方法

    管是新建还是换了版本都不行。从03一直换到10版,都没有用。新建的文件都是那个样,文字显示很紧密。论坛居然不支持图片格式。还是有一些郁闷的。 请问您有无根据Daisy的提示改变所选字体的字符间距设置呢 ...

  • 禁止firefox页面标签(tab)内的文字显示省略号

    省略号会占据很多空间,并且没有太大意义 我们可以禁止firefox页面标签(tab)内的文字显示省略号 操作步骤: 在地址栏中输入:about:config 在过滤器文本框中输入:ellipsis 在 ...

  • 易信语音消息怎么转换为文字显示

    易信语音消息怎么转为文字显示?易信作为一款通讯类的软件,功能可谓五花八门,无论我们想到的还是没有想到的都为我们准备好了。比如易信语音消息转为文字显示,有些时候总是不方便接收语音吧!这不易信为大家准备好 ...

  • Win7如何利用ClearType让所有文字显示更清晰包括中文

    Win7文字显示更清晰教程,ClearType不是专门的字体,而是一种显示技术,可以称为“超清晰显示技术”,它是专门为液晶显示器用的,可以大大增强所有文字的显示清晰度(包括中文),这种改善在如 Tab ...