IE6、IE7、IE8实现盒子阴影shadow
来源:互联网 发布:办公室靠垫知乎 编辑:程序博客网 时间:2024/06/06 18:12
通常,我们实现盒阴影都是通过这段代码来实现的
-moz-box-shadow:
3px
3px
4px
#000
;
-webkit-box-shadow:
3px
3px
4px
#000
;
box-shadow:
3px
3px
4px
#000
;
但是,IE6、7、8不认识这段样式,所以我们会考虑用滤镜来实现这功能
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')"
;
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=
4
,Direction=
135
,Color=
'#000000'
);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);
说明: strength是阴影大小,direction是阴影方位,单位为度,可以为负数,color是阴影颜色 (尽量使用数字)
使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示(block或inline-block;)
其实如果要求不是那么苛刻的话,IE下用滤镜已经能达到我们要的效果了。当然,如果你觉得滤镜不那么完美,非要用图片去实现,那也可以,就不用继续往下读我要说明的几个注意点了。
首先,滤镜里的颜色属性必须写完整,不能用缩写。比如#000000不能写成#000,不然就会出现这样的效果
而且,不管你用什么颜色的缩写,都会变成这样,哪怕你写成#fff,最终效果也会是这样。
第二,滤镜的阴影是计算在宽高内的。比如我的盒子宽高都是100px,当我设置阴影的宽度为4px的时候,实际我盒子的宽度和高度就都变成了104px
第三,在盒阴影下,box会自动加上overflow:hidden。
1 0
- IE6、IE7、IE8实现盒子阴影shadow
- [前端] IE6、IE7、IE8实现盒子阴影shadow
- 盒子阴影-box-shadow
- IE7/IE8改为IE6
- 兼容IE6 IE7 IE8
- IE6 IE7 IE8兼容性
- 区分IE6,IE7,IE8
- css防止图片过大撑破盒子 兼容 ie6、 ie7、 ie8、 ff
- 实现IE6、IE7、IE8多版本浏览器共存
- 盒子阴影box-shadow和文本阴影text-shadow
- 让IE6、IE7、IE8支持CSS3的圆角、阴影样式-最好的插件
- IE6, IE7, IE8, Firefox兼容问题
- IE6、IE7、IE8、FF兼容性问题
- ie8 与 ie6,ie7 兼容问题
- 让IE6,IE7,IE8共存
- JS 检测IE6,IE7,IE8
- 兼容 FF, IE6 ,IE7,IE8
- 兼容 FF, IE6 ,IE7,IE8
- OC浅拷贝和深拷贝
- 对java serializable的一些了解
- Android进程守护详解及解决方案
- Android6.0 EncodingUtils等相关类被移除
- 字符串判断考虑情形
- IE6、IE7、IE8实现盒子阴影shadow
- 第八节 Shell文本操作
- 数据库的完整性
- HTML
- linux下Ftp客户端程序与Makefile
- 第九节 Linux服务器启动流程
- Android客户端插件化热修复各种方案对比和最全总结
- cocoapods安装遇到的冲突
- android基础题型