边框的阴影

网页里面,好多时都希望为边框加上阴影效果,看上去似乎凸显浮现,呼之欲出,比方说,页面的边线,对话框的边框,等等。

过去，我只知道是用图片，让美工将图切出来，然后就是排列，将位置对齐。这是一件非常麻烦的事情，常常要花去不少的工夫。今时今日，如果还有谁按照这种速率去干活，公司可能就要吃屎了。

今天我才知道，原来可以用CSS来搞。欢迎来搞。

代码是这样的：

CSS

#sl-shadow{    padding:20px;    /* sane web browsers */-moz-box-shadow:1px 3px 12px #bbb;-webkit-box-shadow:1px 3px 12px #bbb;box-shadow:1px 3px 12px #bbb;/* gte ie8 */-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";        /* lte ie7 */         width:500px;        *background: #fff;        *filter:             progid:DXImageTransform.Microsoft.Shadow(color='#ffffff',direction=0,strength=0)             progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',direction=90,strength=4)             progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',direction=180,strength=4)             progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',direction=270,strength=4);}

DIV

<div id="sl-shadow">    恭喜发财，利屎逗来！</div>

之所以写这么多句CSS，是因为浏览器的兼容问题。尤其是IE，恶心得很。

值得一提的是，IE7这里，除了要指定background，还务必要指定width，否则出不来效果。

惨痛教训：

IE就不要搞这些边框了，页面会变得奇慢无比！

参考文章：

跨浏览器实现投影(box-shadow)那点事

CSS3属性box-shadow使用教程