box-shadow兼容性

来源：互联网发布：淘宝网有电脑客户端吗编辑：程序博客网时间：2024/06/05 14:49

转载引用：http://blog.csdn.net/hutuchongaini/article/details/55671075

转载引用：http://blog.csdn.net/xpf_show/article/details/37510895

参考资料：http://www.w3school.com.cn/cssref/pr_box-shadow.asp

box-shadow属性值

h-shadow必需。水平阴影的位置。允许负值。 v-shadow必需。垂直阴影的位置。允许负值。 blur可选。模糊距离。 spread可选。阴影的尺寸。 color可选。阴影的颜色。请参阅 CSS 颜色值。 inset可选。将外部阴影 (outset) 改为内部阴影。

目前支持的浏览器 IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1；

兼容性写法：

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5); /*for ie6,7,8*/
-moz-box-shadow:2px2px5px#969696;/*firefox*/
-webkit-box-shadow:2px2px5px#969696;/*webkit*/
box-shadow:2px2px5px#969696;/*opera或ie9*/

IE兼容的另一种写法：

【HTML】

<body class="notIE modern">

【CSS】

#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

阅读全文

0 0