实现跨浏览器的盒阴影效果
2011-09-03 00:26
253 查看
对于支持box-shadow属性的浏览器只要一层标签就可以搞定了,但是,如果要使用模糊滤镜实现IE浏览器下的盒阴影效果,需要借助一个“幕后”的标签,这是一个与主体标签同样大小的div,有着特定的背景色(取决于投影的颜色),以及模糊大小,由于与主体标签大小一致,现代浏览器不鸟IE私有的filter滤镜,所以,此“幕后”标签的存在对于Firefox、Chrome这类现代浏览器的UI表现几乎没有任何影响。
代码:
<style>
.baseBlock{
position:relative;
}
.baseBlockIn{
width:220px;
height:220px;
background:#a0b3d6;
box-shadow:10px 10px 5px #444;
-moz-box-shadow:10px 10px 5px #444;
-webkit-box-shadow:10px 10px 5px #444;
position:relative;
z-index:1;
}
.ieShadow{
_width:220px;
_height:220px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=18);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=18)";
background-color:#444\9;
position:absolute;
top:-8px;
left:-8px;
}
</style>
<div class="baseBlock">
<div class="baseBlockIn"></div>
<div class="ieShadow"></div>
</div>
代码:
<style>
.baseBlock{
position:relative;
}
.baseBlockIn{
width:220px;
height:220px;
background:#a0b3d6;
box-shadow:10px 10px 5px #444;
-moz-box-shadow:10px 10px 5px #444;
-webkit-box-shadow:10px 10px 5px #444;
position:relative;
z-index:1;
}
.ieShadow{
_width:220px;
_height:220px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=18);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=18)";
background-color:#444\9;
position:absolute;
top:-8px;
left:-8px;
}
</style>
<div class="baseBlock">
<div class="baseBlockIn"></div>
<div class="ieShadow"></div>
</div>
相关文章推荐
- CSS实现跨浏览器的box-shadow盒阴影效果(1)
- CSS3实现圆角、阴影、透明效果并兼容各大浏览器
- css实现跨浏览器的盒阴影效果告别图片实现类似效果
- CSS实现跨浏览器的box-shadow盒阴影效果(2)
- 乐杨俊:div实现阴影效果(适应各个浏览器)
- css实现跨浏览器的box-shadow盒阴影效果告别图片实现类似效果(2)
- 跨浏览器实现盒阴影(box-shadow)效果
- CSS实现跨浏览器的box-shadow盒阴影效果
- CSS实现跨浏览器的box-shadow盒阴影效果(2)
- div实现阴影边框效果(适应各主流浏览器)
- CSS实现兼容浏览器的文字阴影效果
- html5 js 实现浏览器全屏效果(F11)
- CSS实现文字浮雕效果,文字阴影效果
- CSS+Canvas实现图片灰度效果,兼容所有浏览器
- css实现边框阴影效果的方法(含兼容)
- CSS实现瀑布流等分布局效果,兼容各大主流浏览器
- Android实现图片添加阴影效果的2种方法
- Javascript实现浏览器标题栏文字滚动效果
- Bootstrap中实现圆角、圆形头像和响应式图片/css3圆角、图片阴影效果总结
- IE10-浏览器实现placeholder效果