兼容IE的内阴影和外阴影效果
2013-01-25 17:25
190 查看
关于阴影这个效果,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);
实现原理是新建一个层,加模糊效果作为阴影,实现如下:
外阴影:
效果图:
内阴影:
效果图:
我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影
文章正文已结束,感谢阅读。如果本文对您有所帮助,请点击推荐一下。
如果对本文有何建议或疑问请留言或加群讨论,前端开发交流群(75701468)
文章属于原创,如需转载请注明文章来源,不胜感激。
文章地址:/article/5791653.html
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; /* 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)
文章属于原创,如需转载请注明文章来源,不胜感激。
文章地址:/article/5791653.html
蜂众网,广州蜂众网,瀑布流
相关文章推荐
- CSS3 应用01 - 文本阴影效果(兼容IE 7-9 Firefox Opera Chrome 等多浏览器)
- 兼容IE的内阴影和外阴影效果
- 让ie6/7/8兼容css3的圆角阴影等特殊效果的方法 PIE1.0.0及placeholder在这些IE下生效的方法
- 54 js index() 兼容ie的短阴影效果 div高度无法获取 轮播图片 文字居与div底部 filter()和eq()
- 兼容ie的内阴影和外阴影实现效果及测试代码
- 兼容ie的内阴影和外阴影实现效果及测试代码
- 兼容N多浏览器的CSS阴影效果
- Jquery 插件图片放大效果(兼容ie 火狐 谷歌 Safari)
- 解决安卓与IOS点击效果兼容(去除移动端Ios点击阴影 )
- 转: IE下模拟css3中的box-shadow(阴影)效果代码
- IE、FireFox、Opera全兼容的JS解析XML文件实现省、市、县(区)三级联动效果
- JS图片loading及放大查看效果(兼容IE,FF)
- JS图片loading及放大查看效果(兼容IE,FF)
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)
- 兼容IE FF CSS 阴影 背景半透明
- javascript滑动伸缩效果(兼容IE/FF)
- [练习]仿迅雷今日看点效果 兼容ie ff opera
- [练习] 便捷入口效果,很多商务网站用到 兼容 ie ff opera
- 浏览器兼容的css阴影效果