兼容IE6-9,FF,Chrome的box-shadow效果（纯CSS）

昨天由于工作关系，遇上了这个问题，苦恼一日无解——残念。

所幸终于在今天早上得到了解决，遗憾的是灵活性不够强，不能根据内容自适应，要配合JS才能达到自适应效果

不过总结到这里已经很满意了，毕竟规律已经摆在那里，shadow和content的宽高比main小10px就OK了

当然，具体阴影效果做调整后，其他属性值也得作相应调整，遵循此消彼长原则便可

还有的不足就是，不支持过低版本的FF和Chrome

但估计用这两种浏览器的人，都不会沉沦于低版本的吧，毕竟FF和Chrome的用户群与IE用户群是有所区别的

<style type="text/css">
.main{
 width:250px;
 height:200px;
 overflow:hidden;
 position:absolute;
 top:100px;
 left:100px;
}
.shadow{
 background:#FFF;
 width:240px;
 height:190px;
 -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
 box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
 margin:5px -5px -5px 5px;
 margin:0px9;
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.20');
}
:root .shadow{
 margin:5px -5px -5px 5px;
 filter:none;
}
.content{
 position:absolute;
 width:240px;
 height:190px;
 margin:5px;
 top:0;
 left:0;
 background:#FFF;
}
</style>

<div class="main">
  <div class="shadow"></div>
  <div class="content"></div>
</div>