You are here
兼容IE的内阴影和外阴影效果 内侧阴影 外侧阴影 有大用 有大大用
我自己亲自做的与下面的代码原理不一样
css
html
<div class="wrapper_outer djhz_wrapper_outer djhz_shadow_outer"><div class="ieShadow"></div></div>
关于阴影这个效果，IE和W3C都有实现的代码，但效果却不统一(以W3C的效果为主)。
W3C实现代码：box-shadow: 水平偏移 垂直偏移 阴影模糊值 阴影外延值 insert(是否内阴影);(默认为外阴影,如有 inset就是内阴影)
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; /* ie78 通过定位自适应宽高 */ position:absolute; left:-5px; top:-5px; right:5px; bottom:5px; /* ie6 需要指定宽高 */ _width:182px; _height:137px; filter:progid:dXImageTransform.Microsoft.blur(pixelradius=5); /* for ie8 标准模式 */ -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)"; }
<div class="outer"> <div class="ieShadow"><!--利用IE滤镜模糊效果模拟阴影--></div> <div class="w3cShadow"> <img src="../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; /* ie78 通过定位自适应宽高 */ position:absolute; left:-5px; top:-5px; right:5px; bottom:5px; /* ie6 需要指定宽高 */ _left:-15px; _width:180px; _height:132px; filter:progid:dXImageTransform.Microsoft.blur(pixelradius=5); /* for ie8 标准模式 */ -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>
效果图：
文章正文已结束，感谢阅读。如果本文对您有所帮助，请点击推荐一下。
如果对本文有何建议或疑问请留言或加群讨论，前端开发交流群(75701468)
文章属于原创，如需转载请注明文章来源，不胜感激。
文章地址：http://www.cnblogs.com/leolai/archive/2013/01/25/2877069.html
来自 http://www.cnblogs.com/leolai/archive/2013/01/25/2877069.html
IE模糊滤镜下的跨浏览器的内阴影效果实例页面
来自 http://www.zhangxinxu.com/study/201007/ie-blur-box-shadow-inset-demo.html
CSS代码：
.baseBlock{ width:220px; position:relative; overflow:hidden; } .baseBlockIn{ padding:10px 15px; background-color:#888\9; box-shadow:inset 30px 30px 20px #888; -moz-box-shadow:inset 30px 30px 20px #888; -webkit-box-shadow:inset 30px 30px 20px #888; } .ieShadow{ _width:220px; _height:220px; filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=20); -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=20)"; background-color:#fff\9; position:absolute; top:10px; left:10px; bottom:-10px; right:-10px; } .content{ position:relative; z-index:1; }
HTML代码：
<div class="baseBlock">
<div class="baseBlockIn">
<div class="ieShadow"></div>
<div class="content">昨晚请多玩优秀员工吃饭，聊了几点职场体会。(1) 把自己当老板看，象老板一样拼命干活，能力自然就提高了。有了能力，假如多玩不能给你好的回报，其他公司一定会给。(2) 不是每次付出就一定有回报，但是不断付出就一定会有回报。@李学凌 补充了一点：象你的老板一样思考，能力会提高得更快。</div>
</div>
</div>
效果
来自 http://www.zhangxinxu.com/study/201007/ie-blur-box-shadow-inset-demo.html