《
详解CSS阴影的使用》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234Z12013.htm
欲了解更多对于IE的这两个滤镜，请查看：Shadow 和 Dropshadow
box-shadow的语法和text-shadow是一样的。
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
这里的颜色就是阴影的颜色，你可以将颜色写在前面，也可以写在最后。x轴和y轴分辨是其阴影的偏移地位，含混半径可以懂得为阴影长度。而且当初大局部浏览器都支持多层阴影，你可以用逗号离开多组设置(当然也可以只是用单个设置)。
h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255,详解CSS选择器、优先级与匹配原理, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
或者
text-shadow的浏览器兼容性
firefox在3.5版本中才开端支撑box-shadow，目前对暗影的渲染还不是很完善。
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...
filter: Shadow(Color='black', Direction='135', Strength='2')
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px black;
-moz-box-shadow:2px 2px 2px black;
...
}
h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}
h2#title1{background-position:0 -30px;}
h2#title2{background-position:0 -60px;}
....
h1{color:#000; background:#333; font:bold 24px/2 "微软雅黑",Arial;
text-indent:2em;
text-shadow:black 2px 2px 2px; }
能够查看 查看demo 先。
--> [
网站建设之]详解CSS阴影的使用
目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。须要留神的是，Safari只有4.0才支持多层阴影。
让我们看一个多层阴影的例子(这里疏忽了IE)：
示例：
这里咱们应用到了rgba色彩，它是一种在CSS中同时申明色彩及其透明度的一种方式，且被大多数A级阅读器支持的颜色属性（除了IE），懂得更多请查看：《RGBa色彩的浏览器支持》——同时我们推举对纯色半透明的情形使用这种简略的写法。
效果如下图：
好了，现在让我们忘了IE，来看一看box-shadow。事实上，了解了text-shadow之后，box-shadow就很好理解了,详解CSS背景Background属性，目前只有firefox和safari/chrome通过私有属性支持box-shadow属性。而Opera浏览器固然目前还不支持该属性,详解CSS网页设计中字体大小(em)的问题，然而在其文档中提到下一个版本的引擎Presto 2.3（目前最新版的Opera 10.10的引擎是Presto 2.2.15）中将会支持 box-shadow，那就让我们缓缓等候吧。
该属性目前被除IE之外的大部门浏览器支持，对于IE，我们可以使用shadow滤镜来实现：
事实上，对于文字的阴影效果，我们完整可以用CSS来实现！
效果如图：
text-shadow:[颜色 x轴 y轴 隐约半径],[颜色 x轴 y轴 模糊半径]...
设计师经常使用一些奇特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素存在立体的效果，从而被凸起出来。比方对于文字阴影，传统的办法可能需要将文字切出来，直接使用图片，如果斟酌SEO和网站机能，还可能会使用CSS Sprites等技巧将图片整合：
Tag：使用 ,
详解CSS网页布局中默认字体样式; 阴影 详解 使用 阴影 详解 ,
详解CSS盒子模型;
效果如图：
总结
CSS阴影是CSS3中很有用的特征，我们已经可以在Firefox/webkit/Opera中使用text-shadow，很快也可以在这些浏览器中实现box-shadow。唯独IE特破独行，还在保持它那蹩脚的滤镜，这真是个杯具。
这是很辣手的事件，拼合图片会花掉你的大批时光，而且为了实现更好视觉后果，你可能还要使用高品质的32位png图片，这又要让你面对该逝世的IE 6的png透明问题！
好吧，IE老是会拖我们的后腿，不过值得一提的是，IE的这两个滤镜是支持多层阴影的！好比，可以这样写：
Text-shadow
#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;}
filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');
你可能已经注意到，使用shadow滤镜只能定义角度 direction，而不能定义xy轴，z轴也被换成了strength。注意，使用该滤镜的时候，不可能设置背景颜色，否则滤镜将无效！另外如果你的数学不是很好，不太懂三角函数的算法，你可以使用IE的另外一个滤镜：dropshadow：
先来说IE，IE不支持box-shadow属性，但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说，IE并不把文字阴影和盒子阴影辨别！这就会呈现一些问题：元素中的文字会继续元素的阴影设置。但是如果你不定义该元素的background和border，就只会出现文字阴影，如果只定义background属性而不定义border，就只会出现盒子阴影，文字不会涌现阴影；而假如只定义了border属性而不定义background，就即会出现盒子阴影，内容文字及图片也会出现阴影。有兴致的同窗可以折腾一下。
事实上，box-shadow跟border-radius是很好的错误：
text-shadow可以让我们实现完美的文字阴影效果。基础写法：
(责任编辑：网站建设)
详解CSS阴影的使用相关文章