CSS box-shadow 属性

向不同的 div 元素添加阴影:

#example1 {
box-shadow: 5px 10px;
}

#example2 {
box-shadow: 5px 10px #888888;
}

下面有更多实例。

定义和用法

box-shadow 属性向框添加一个或多个阴影。

默认值:	none
继承性:	no
支持动画:	yes. 阅读有关动画的信息测试一下
版本:	CSS3
JavaScript 语法:	object.style.boxShadow="10px 20px 30px blue" 测试一下

表中的数字表示支持该属性的第一个浏览器版本。

紧跟在 -webkit- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
box-shadow	10.0 4.0 -webkit-	9.0	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

注释: box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值	描述	试一试
none	默认值。不显示阴影	亲自试一试 »
h-offset	必需。阴影的水平偏移。正值将阴影放置在长方体的右侧，负值将阴影放置在长方体的左侧	亲自试一试 »
v-offset	必需。阴影的垂直偏移。正值将阴影置于长方体下方，负值将阴影置于长方体上方	亲自试一试 »
blur	可选。模糊距离。数字越大，阴影越模糊	亲自试一试 »
spread	可选。阴影的尺寸。正值增大阴影的大小，负值减小阴影的大小	亲自试一试 »
color	可选。阴影的颜色。请参阅 CSS 颜色值。默认值是文本颜色。注释: 在 Safari （在PC上）中，颜色参数是必需的。如果不指定颜色，则根本不显示阴影。	亲自试一试 »
inset	可选。将外部阴影 (outset) 改为内部阴影。	亲自试一试 »
initial	将此属性设置为其默认值。请参阅 initial	亲自试一试 »
inherit	从其父元素继承此属性。请参阅 inherit