CSS box-shadow 属性

为不同的 <div> 元素添加阴影：

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

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

下面有更多 "亲自试一试" 示例。

定义和用法

这个box-shadow属性将一个或多个阴影附加到一个元素。

默认值：	没有任何
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS3
JavaScript 语法：	对象.style.boxShadow="10px 20px 30px blue"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit- 或 -moz- 的数字指定使用前缀的第一个版本。

Property
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;

笔记：要将多个阴影附加到一个元素，请添加一个以逗号分隔的阴影列表（请参阅下面的 "亲自试一试" 示例）。

Value	Description	Demo
none	Default value. No shadow is displayed	Demo ❯
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box	Demo ❯
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box	Demo ❯
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be	Demo ❯
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow	Demo ❯
color	Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.	Demo ❯
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

提示： 了解有关允许值（CSS 长度单位）的更多信息