text-shadow的浏览器兼容性

　　目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari只有4.0才支持多层阴影。

　　IE各个版本都不支持text-shadow;

　　Opera 9.5+支持最多6-9层阴影，并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因，模糊半径被限制到100px;

　　Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面);

　　Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 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;

　　效果如图：

　　firefox在3.5版本中才开始支持box-shadow，目前对阴影的渲染还不是很完美。

　　总结

　　CSS阴影是CSS3中很有用的特性，我们已经可以在Firefox/webkit/Opera中使用text-shadow，很快也可以在这些浏览器中实现box-shadow。唯独IE特立独行，还在坚持它那蹩脚的滤镜，这真是个杯具。