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

设计师常常使用一些独特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素具有立体的效果，从而被突出出来。传统的方法我们可能常常需要将文字切出来，直接使用图片，如果考虑SEO和网站性能，还可能会使用CSS Sprites等技术将图片整合，比如：

1
2
3
4

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;}
....

这是很棘手的事情，拼合图片会花掉你的大量时间，而且为了实现更好视觉效果，你可能还要使用高质量的32位png图片，这又要让你面对该死的IE 6的png透明问题！

事实上，对于文字的阴影效果，我们完全可以用CSS来实现！

可以查看查看demo先。

Text-shadow

text-shadow可以让我们实现完美的文字阴影效果。基本写法：

text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...

或者

text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...

这里的颜色就是阴影的颜色，你可以将颜色写在前面，也可以写在最后。x轴和y轴分别是其阴影的偏移位置，模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影，你可以用逗号分开多组设置(当然也可以只是用单个设置)。

示例：

h1{color:#000; background:#333; font:bold 24px/2 "微软雅黑",Arial; 
text-indent:2em;
text-shadow:black 2px 2px 2px; }

效果如下图：

该属性目前被除IE之外的大部分浏览器支持，对于IE，我们可以使用shadow滤镜来实现：

filter: Shadow(Color=''black'', Direction=''135'', Strength=''2'')

你可能已经注意到，使用shadow滤镜只能定义角度 direction，而不能定义xy轴，z轴也被换成了strength。注意，使用该滤镜的时候，不能够设置背景颜色，否则滤镜将无效！另外如果你的数学不是很好，不太懂三角函数的算法，你可以使用IE的另外一个滤镜：dropshadow：

filter: dropshadow(OffX=2, OffY=2, Color=''black'', Positive=''true'');

好吧，IE总是会拖我们的后腿的，不过值得一提的是，IE的这两个滤镜是支持多层阴影的！比如，可以这样写：欲了解更多关于IE的这两个滤镜，请查看：Shadow 和 Dropshadow

让我们看一个多层阴影的例子：

h1{font:bold 32px/

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