box-shadow兼容性

最新推荐文章于 2025-06-30 22:07:10 发布

转载最新推荐文章于 2025-06-30 22:07:10 发布 · 1.4k 阅读

文章标签：

#前端 #css3

前端专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了 CSS 中 box-shadow 属性的使用方法及其兼容性写法，包括水平和垂直阴影位置、模糊距离、阴影尺寸及颜色等参数设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载引用：http://blog.youkuaiyun.com/hutuchongaini/article/details/55671075

转载引用：http://blog.youkuaiyun.com/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:2px 2px 5px #969696; /*firefox*/

-webkit-box-shadow:2px 2px 5px #969696; /*webkit*/

box-shadow:2px 2px 5px #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);
}