CSS3中很有用的特性:CSS阴影

效果如图：

这里我们使用到了rgba色彩，它是一种在CSS中同时声明颜色及其透明度的一种方法，且被大多数A级浏览器支持的色彩属性（除了IE），了解更多请访问：《RGBa色彩的浏览器支持》——同时我们推荐对于纯色半透明的情况使用这种简单的写法。

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和color，就只会出现文字阴影，如果只定义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-radiu

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!