在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 除了可以为文字添加一组投影效果外 ， 其实我们在这个样式里 ， 是可以为文字添加多组投影效果的 ， 每一组用逗号隔开 ， 代码如图 。
推荐阅读
- 如何用H5改变图形样式
- 如何解决CAD中图纸显示不全
- 怎么解决网页在谷歌和火狐显示差别
- 电脑打印显示打印错误怎么办
- ps中怎样在图片中加文字
- 文字底纹与页面背景的改变
- PS如何制作晕染文字效果？
- Excel表格怎么做单元格斜线分割文字
- Windows 7如何设置文件始终显示为图标
- ps怎么给文字加白边