文字阴影的几种实现方式

发布时间:2020-04-16编辑:脚本学堂
带阴影的文字在WEB前端开发中是一项非常重要的文字装饰技巧,由于使用的实现方式不同,文字阴影在不同网页和浏览器中的表现也不尽相同。下面总结了几种比较常见的文字阴影的实现方式,希望大家参考一下。

1.纯图片的实现方式
通过在图像编辑软件中实现文字阴影,然后将文字及其阴影以图片的方式输出到网页中。这种方式的文字阴影有如下几个特点:
1)跨浏览器,即在不同的浏览器下显示效果是一样的。
2)字体样式不受客户端的影响,即无论用户的电脑上有没有安装相应字体,都能正常显示。
3)不便于修改,一般只能通过图像编辑软件进行修改,然后上传到服务器
4)下载速度慢,由于图片数据量相对文本要大得多,因此这种方式不宜在网页中大量使用。
2.背景图片&文字的实现方式
通过为文字所在的元素添加背景图像(背景图像中有类似大小的相同文字)并在背景图像和文字间设置位移的方式。这种方式有以下几个特点:
1)跨浏览器。
2)字体受到客户端安装情况的影响,用户如果没有安装相应字体就会影响前景中文字的展现。
3)不便于修改。
4)下载速度慢,但优于纯图片的方式。
示例:
 

复制代码 代码示例:
<div id="title">
     <h1><a href="www.jb200.com论文检测系统</a></h1>
</div>#title {position: absolute; left: 8px; top: 43px;} h1 {font-size: 38px; margin: 0px;}
 

3.纯CSS的实现方式
这种方式有以下几个特点:
1)阴影仅能在支持相应属性的浏览器中正常显示,但浏览器对该属性的支持越来越好。
2)字体不受到客户端字体安装情况的影响,但不妨碍阴影正常显示。
3)便于修改。
4)下载速度快,纯文本表示