CSS3 应用01 - 文本阴影效果（兼容 等多浏览器）

【 tulaoshi.com - Web开发 】

CSS3 提供一个文本阴影属性：text-shadow : color || length || lenth|| opacity

其中，第一个参数是颜色，第二个参数是阴影的水平延伸距离，第三个参数是阴影的垂直延伸距离，第四个参数是模糊效果的作用距离。支持设定多组效果。

例如：text-shadow: #333333 4px 5px 6px;

可是，IE 6-9 都不支持文本阴影的属性，只能使用 filter: glow / blur / shadow / dropshadow。。。来模拟文本阴影效果。

那么，我们难道就没有办法了吗？答案是可以的。

下面介绍几种办法：

如果你对日本人非常敏感，请只看第一种方法！这里只谈技术，不含民族情感。

1）多重文本阴影

实现原理：添加两个相同文本的 span，其中一个文本显示文本，一个作为阴影文本。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"    html xmlns="http://www.w3.org/1999/xhtml"    head       meta http-equiv="Content-Type" content="text/html; charset=utf-8" /       title/title      style type="text/css"           body           {              background-color: #cccccc;          }          h1          {              color: #ff9900;              font-family: 微软雅黑, 黑体;              font-size: 48pt !important;              font-weight: bold;              text-shadow: #fbfcfd 4px 4px 4px;              padding-bottom: 2px;          }          .ielte9  h1  span          {              position: absolute;              color: #ff9900;          }          .ielte9  h1  span.shadow          {              display: inline-block;              zoom: 1;              color: #fbfcfd;              filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=4);          }      /style   /head   body      !--[if lte IE 9 ]div class="ielte9"h1span class="shadow"基本业务框架系统/spanspan基本业务框架系统/span/h1/div![endif]--      !--[if (gt IE 9)|!(IE)]!--divh1span基本业务框架系统/span/h1/div!--![endif]--   /body  /html 

其中，用到了CSS if hack 条件语法，详细的说明请找谷歌老师。我可以大概说一下：

!--[if IE] 表示判断是否IE浏览器，![endif]-- 表示条件结束

非IE浏览器，多添加一个开始标志：!--，结束使用：!--![endif]--

!--[if lte IE 9 ] 表示 IE 浏览器版本 ≤ 9.0，!--[if (gt IE 9)|!(IE)] 表示 IE 浏览器版本 9.0 或者 非IE浏览器

lte - 不高于，lt - 小于，gt - 大于，gte - 不低于

实现评价：性能最好，有些重复文本块，如果页面有很多需要显示阴影的文本块，那么建议使用这种方法。

2）JS 文本阴影

实现原理：使用一个 span，用 JS 代码动态显示文本阴影效果。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"   html xmlns="http://www.w3.org/1999/xhtml"   head       meta http-equiv="Content-Type" content="text/html; charset=utf-8" /       title/title       style type="text/css"           body           {               background-color: #cccccc;          }          h1          {              color: #ff9900;              font-family: 微软雅黑, 黑体;              font-size: 48pt !important;              font-weight: bold;              text-shadow: #fbfcfd 4px 4px 4px;              padding-bottom: 2px;          }      /style      script src="textshadow.js" type="text/javascript"/script      script type="text/javascript"          var ieShadowSettings = function () {              return isMSIE ？ [              { sel: 'h1', shadow: '4px 4px 4px #fbfcfd' }              ] : null;          };       /script  /head  body      h1基本业务框架系统文本阴影测试（兼容 IE 7-9版本）/h1  /body  /html 

这种方式，要求首先定义一个文本阴影的初始化对象，自动判断 7.0 ≤ IE版本 ≤ 9.0，执行 IE 文本阴影效果。否则执行默认的 text-shadow 属性设置。

特别提示： 如果 shadow: '#fbfcfd 4px 4px 4px'，运行没问题，自动会忽略 #fbfcfd，文本阴影颜色 = 字体的颜色！

其中，引用了日本人编写的一个文本阴影类库：textshadow.js

实现评价：不用定义多重文本块，调用JS方法最简单。但是页面会产生大量的重复文本块。如果页面有很多需要显示阴影的文本块，那么请不要使用这种方法。性能一般。

（对不起读者了，一开始我也没有经过大数据量测试，就告诉同学：推荐这种方法，现在郑重道歉！少量文本块阴影可用，大量文本块请放弃！）

其实，还有第三种办法：

3）单文本过滤器

实现原理：定义一个文本块，使用 shadow 过滤器添加阴影。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"   html xmlns="http://www.w3.org/1999/xhtml"   head       meta http-equiv="Content-Type" content="text/html; charset=utf-8" /       title/title       style type="text/css"           body           {               background-color: #cccccc;          }          h1          {              color: #ff9900;              font-family: 微软雅黑, 黑体;              font-size: 48pt !important;              font-weight: bold;              filter: Shadow(color=#fbfcfd, direction=135, dtrength=4);              text-shadow: #fbfcfd 4px 4px 4px;              padding-bottom: 2px;          }      /style  /head  body      divh1span基本业务框架系统/span/h1/div  /body  /html 

这种方法，显示的文本阴影有黑边，效果比不上前面两种。所以放到最后来讲。

这种方法，只要定义一个文本块，CSS 设置最简单，效果也是最差的。

实现评价：定义一个文本块，不用写JS代码。性能比 blur 过滤器稍差一些。