兼容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:0px\9;

 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>

巴特西

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

最新文章

热门文章