设计师经常使用独特的字体效果和页面效果。 阴影就是其中之一，可以给页面中的文字和元素带来立体效果并加以强调。 例如，对于文字阴影，传统方法可能需要剪切文字并直接使用图像。 考虑到SEO和站点的性能，我们可能会使用CSS Sprites等技术集成图像：
H2 { background : URL (sprites.png ) no-repeat 0 0； font-size:0； 文本索引：-9999 em； H2 # title1{ background-position :0-30px； (H2#title2)背景定位：0-60px； } .
这是一件麻烦事。 整合图像需要很多时间。 然后，可能需要使用高质量的32位png图像来获得更好的视觉效果。 这还得面对该死的IE 6的png透明度问题。
其实，关于文字的阴影效果，可以通过CSS充分实现！
可以看到德谟的未来。
文本-阴影
文本阴影可以让我们实现完美的文字阴影效果。 基本写法：
文本- shadow : [颜色x轴y轴模糊半径]，[颜色x轴y轴模糊半径] .
或者
文本- shadow : [x轴y轴模糊半径色]，[ x轴y轴模糊半径色] .
这里的颜色是阴影的颜色。 颜色可以写在前面，也可以写在最后。 x轴和y轴分别表示阴影的偏移位置，并且模糊半径可被理解为阴影的长度。 而且，现在大多数浏览器都支持多层阴影。 也可以用逗号分开设置多组(当然，也可以只使用单个设置)。
示例：
h1{color:#FFF； 后台： # FFf； font : bold 24 px/2 ' Microsoft Yahoo '，Arial； 文本索引：2 em； 文本- shadow : black 2px 2px 2px； }
效果如下图所示。
除IE外，大多数浏览器目前都支持此属性。 对于IE，可以使用shadow过滤器实现。
过滤器： shadow (color=' black '，Direction='135 '，Strength='2' )
您可能注意到，“shadow”滤镜只能定义角度direction，而不是xy轴。 z轴也被strength替换了。 使用此滤镜时，不能设置背景颜色。 如果不设定，滤镜将无效。 另外，如果不太擅长数学，不太了解三角函数的算法，请使用IE的其他滤波器。 dropshadow :
过滤器： drop shadow (offx=2，OffY=2，Color='black '，Positive='true ' )；
那么，IE总是拖我们的后腿，但有趣的是，IE的这两个滤波器支持多层阴影！ 例如，可以写如下：
过滤器： dropshadow (offx=2，OffY=2，Color='red '，Positive='true ' ) drop shadow ) offx=2，OffY=2，color
有关IE中这两个滤镜的详细信息，请参见Shadow和Dropshadow
让我们看看多层阴影的例子(这里忽略了IE )。
h1{font:bold 32px/2 Verdana，Geneva，sans-serif； color:#f39； 文本阴影：1 px1px2px rgba (0，0，0，8)，001emrgba ) 255，0，255，0.5 )，0.2emrgba )，0，0，0，0，255， }
效果如下。
这里使用了rgba颜色。 这是一种在CSS中同时声明颜色及其透明度的方法，是大多数a级浏览器支持的颜色属性。 IE除外。 详细情况请看这里。 《RGBa色彩的浏览器支持》 ——同时，单色半透明时推荐这样简单的写法。
文本-阴影浏览器兼容性
当前，Firefox 3.5、Safari 1.1 /chrome 2.0和opera 9.5支持文本阴影，IE不支持这些选项。 需要注意的是，Safari仅4.0支持多层阴影。
IE的各个版本不支持文本阴影；
Opera 9.5最多支持6-9层阴影，并使用CSS2渲染顺序。 第一个定义的阴影在底部。 并且，由于性能，模糊半径被限制在100px；
“gecko (福克斯)”理论上支持无限层文本阴影，并遵循新的CSS3渲染顺序。 第一个定义的阴影位于顶部。
Safari 1.1-3.2仅支持单层文本阴影。 (仅显示第一个逗号之前的声明，忽略后面的。 沙夫足球俱乐部
ri 4.0+才支持多层阴影以及新的CSS3渲染顺序；box-shadow
先来说IE，IE不支持box-shadow属性，但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说，IE并没有把文字阴影和盒子阴影区分！这就会出现一些问题：元素中的文字会继承元素的阴影设置。但是如果你不定义该元素的background和border，就只会出现文字阴影，如果只定义background属性而不定义border，就只会出现盒子阴影，文字不会出现阴影；而如果只定义了border属性而不定义background，就即会出现盒子阴影，内容文字及图片也会出现阴影。有兴趣的同学可以折腾一下。
好了，现在让我们忘了IE，来看一看box-shadow。事实上，了解了text-shadow之后，box-shadow就很好理解了，目前只有firefox和safari/chrome通过私有属性支持box-shadow属性。而Opera浏览器虽然目前还不支持该属性，但是在其文档中提到下一个版本的引擎Presto 2.3(目前最新版的Opera 10.10的引擎是Presto 2.2.15)中将会支持 box-shadow，那就让我们慢慢等待吧。
box-shadow的语法和text-shadow是一样的。
boxShadow{ ... -webkit-box-shadow:2px 2px 2px black; -moz-box-shadow:2px 2px 2px black; ... }
事实上，box-shadow和border-radius是很好的搭档：
boxShadow1{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:1px solid ddd; -webkit-box-shadow:0 0 10px black; -moz-box-shadow:0 0 10px black; padding:10px;}
效果如图：
firefox在3.5版本中才开始支持box-shadow，目前对阴影的渲染还不是很完美。
总结
CSS阴影是CSS3中很有用的特性，我们已经可以在Firefox/webkit/Opera中使用text-shadow，很快也可以在这些浏览器中实现box-shadow。唯独IE特立独行，还在坚持它那蹩脚的滤镜，这真是个杯具。