今天小编跟大家讲解下有关兼容ie的内阴影和外阴影实现效果及测试代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关兼容ie的内阴影和外阴影实现效果及测试代码 的相关资料，希望小伙伴们看了有所帮助。
关于阴影这个效果 IE和W3C都有实现的代码 但效果却不统一(以W3C的效果为主)。 W3C实现代码：box-shadow: 水平偏移 垂直偏移 阴影模糊值 阴影外延值 insert(是否内阴影); IE的阴影实现代码：progid:DXImageTransform.Microsoft.Shadow(color=颜色, direction=角度, strength=阴影强度); 但IE的阴影看起来有点恶心 而且还不可以设置模糊值。可以点击这里查看 所以 要想效果跟W3C的效果接近 可以利用IE滤镜的模糊效果达到 IE的模糊效果实现代码：filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7); 实现原理是新建一个层 加模糊效果作为阴影 实现如下： 外阴影： 复制代码代码如下: .outer{ position:relative; font-size:0; width:182px; height:137px; margin:0 0 50px 5px; } .outer .w3cShadow { position:relative; border:1px solid #000; box-shadow: 0 0 10px #000000; } .outer .ieShadow{ display:none; display:block\9; background:#000\9; position:absolute; left:-5px; top:-5px; right:5px; bottom:5px; _width:182px; _height:137px; filter:progid:dXImageTransform.Microsoft.blur(pixelradius=5); -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)"; } 复制代码代码如下: <div class="outer"> <div class="ieShadow"><!--利用IE滤镜模糊效果模拟阴影--></div> <div class="w3cShadow"> <img src="https://www.aidi.net.cn//css/../images/rose.jpg"width="180"height="135"> </div> </div> 效果图：
内阴影： 复制代码代码如下: .inner{ position:relative; width:182px; font-size:14px; margin:0 0 50px 5px; } .inner .w3cShadow { position:relative; background:#000\9; padding:10px; border:1px solid #000; box-shadow: 0 0 10px #000000 inset; } .inner .ieShadow{ display:none; display:block\9; background:#fff\9; position:absolute; left:-5px; top:-5px; right:5px; bottom:5px; _left:-15px; _width:180px; _height:132px; filter:progid:dXImageTransform.Microsoft.blur(pixelradius=5); -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)"; } .inner .content{ position:relative; z-index:1; } 复制代码代码如下: <div class="inner"> <div class="w3cShadow"> <div class="ieShadow"><!--利用IE滤镜模糊效果模拟阴影--></div> <div class="content"> 我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影 </div> </div> </div> 效果图：
来源：爱蒂网
