文字阴影的几种实现方式【前端开发技能必备系列】

昨天看到博问上有人问文字阴影的事。我认为，带阴影的文字在WEB前端开发中是一项非常重要的文字装饰技巧，但是由于使用的实现方式不同，文字阴影在不同网页和浏览器中的表现也不尽相同。我总结了几种比较常见的文字阴影的实现方式及其特点，希望抛砖引玉，能够更好地促进这项技巧得到更好更广泛的应用。

1.纯图片的实现方式【最原始的方法，现在仍然沿用】

通过在图像编辑软件中实现文字阴影，然后将文字及其阴影以图片的方式输出到网页中。这种方式的文字阴影有如下几个特点：

1）跨浏览器，即在不同的浏览器下显示效果是一样的。
2）字体样式不受客户端的影响，即无论用户的电脑上有没有安装相应字体，都能正常显示。
3）不便于修改，一般只能通过图像编辑软件进行修改，然后上传到服务器。
4）下载速度慢，由于图片数据量相对文本要大得多，因此这种方式不宜在网页中大量使用。

示例：博客园管理页面的LOGO用的就是这种方式（如下图）

 

2.背景图片&文字的实现方式【最苛刻的方法，逐渐被抛弃】

通过为文字所在的元素添加背景图像（背景图像中有类似大小的相同文字）并在背景图像和文字间设置位移的方式。这种方式有以下几个特点：

1）跨浏览器。
2）字体受到客户端安装情况的影响，用户如果没有安装相应字体就会影响前景中文字的展现。
3）不便于修改。
4）下载速度慢，但优于纯图片的方式。

示例：PaperRater论文检测系统

示例代码：

<div id="title">
     <h1><a href="http://www.paper-rater.com">PaperRater论文检测系统</a></h1>
</div>

#title {position: absolute; left: 8px; top: 43px;}

　h1 {font-size: 38px; margin: 0px;}

 

3.纯CSS的实现方式【最具潜力的方法，越来越流行】

随着CSS3的不断完善和日渐流行，使用CSS3中的 text-shadow 属性来为文字添加阴影成为越来越多前端人员的选择。这种方式有以下几个特点：

1）阴影仅能在支持相应属性的浏览器中正常显示，但浏览器对该属性的支持越来越好。
2）字体不受到客户端字体安装情况的影响，但不妨碍阴影正常显示。
3）便于修改。
4）下载速度快，纯文本表示。

示例：前端观察

有关text-shadow的详细使用说明，请参见：
http://www.w3cplus.com/node/52

-----------------------------------------------------

转载请注明作者：刘涛