头闻号

东莞市美佳环保材料有限公司

工业用清洗剂|化工产品加工|化工原料代理加盟|电镀加工|磷酸盐|综合性公司

首页 > 新闻中心 > 科技常识:兼容ie的内阴影和外阴影实现效果及测试代码
科技常识:兼容ie的内阴影和外阴影实现效果及测试代码
发布时间:2024-12-23 20:02:11        浏览次数:4        返回列表

今天小编跟大家讲解下有关兼容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> 效果图:

来源:爱蒂网