text-shadow

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

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

或者

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

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

写法实例：text-shadow:1px 1px 2px #ffff00;

或者

text-shadow:1px 1px 2px #ffff00,3px 3px 5px #ff00ff;

如果颜色部分用rgba()来写，通过透明度来调节阴影层与层之间的过渡，效果应该很漂亮。

IE可以通过滤镜来实现

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



以及



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



同时，ie这两个滤镜也支持多层阴影：



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');

box-shadow

    基本上box-shadow跟text-shadow类似，不再累赘，可以参考上面的写法。

    IE不支持box-shadow属性，但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说，IE并没有把文字阴影和盒子阴影区分！
这就会出现一些问题：元素中的文字会继承元素的阴影设置。但是如果你不定义该元素的background和border，就只会出现文字阴影，如果只定义
background属性而不定义border，就只会出现盒子阴影，文字不会出现阴影；而如果只定义了border属性而不定义background，
就即会出现盒子阴影，内容文字及图片也会出现阴影。



本文参考：http://www.qianduan.net/css-shadow-xiangjie.html