---

CSS3 box-shadow 属性

CSS3 box-shadow 属性允许在一个HTML元素上添加一个或多个阴影。该属性可以使元素看起来像是浮在页面上或凸出页面。Box-shadow 属性可以创建一个元素周围的多个阴影。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

属性值具体解释如下：

• h-shadow：水平阴影的位置，必须要设置。
• v-shadow：垂直阴影的位置，必须要设置。
• blur：阴影的模糊程度，非必须项。
• spread：阴影的扩展程度，非必须项。
• color：阴影颜色，非必须项。
• inset：指定阴影是否为内阴影，非必须项。

可选值

h-shadow、v-shadow

• length：必须，指定阴影的水平和垂直偏移量。接受正值和负值，正值会将阴影往右下移动，负值会将阴影往左上移动。当h-shadow为正、v-shadow为负时，阴影会被放置在元素的左下方。

blur

• length：非必须。用于指定阴影的模糊半径，模糊越大，阴影越大，最大值为指定px。

spread

• length：非必须。用于指定阴影的大小范围，正值表示阴影增加了spread大小，负值表示阴影变小spread大小。

color

• color-name：非必须。用于指定阴影颜色，可以是颜色名称或十六进制值。

inset

• none|inset：非必须。指定是否使用内定阴影。默认为非内置阴影（即“外部阴影”）。

示例

以下是一个 box-shadow 的示例：

box-shadow: 5px 5px 5px 0px #000;

该示例中的阴影设置表明：

• 阴影的水平偏移为5px。
• 阴影的垂直偏移为5px。
• 阴影的模糊程度为5px。
• 阴影的扩展程度为0px（即阴影的大小等同于元素的大小）。
• 阴影颜色为#000（即黑色）。
• 阴影为外部阴影（默认情况下）。

多重阴影示例

box-shadow 容许添加多个阴影到单一HTML元素上。以下示例展示如何创建两个不同类型的阴影：

box-shadow: 5px 5px 5px 0px #000,
            -5px -5px 5px 0px #FFFFFF;

该示例中定义的第一个阴影位于元素右下角，颜色为黑色，带有5像素的模糊半径和0像素的阴影扩展程度。第二个阴影位于元素左上角，颜色为白色，带有5像素的模糊半径和0像素的阴影扩展程度。

应用

box-shadow 成为了网页设计者们渲染视觉效果的利器。它可以用来创造效果，适用于许多场合，如阴影效果和图像边框。它也可以用来强调重要功能，如联系人表单等。

以下示例使用了 box-shadow 属性，使一个 HTML 元素产生带有左边框和下边框的阴影效果：

.box {
   width: 200px;
   height: 100px;
   background-color: #FFF;
   box-shadow: -5px 5px 5px 0px #AAA;
   border-left: 1px solid #000;
   border-bottom: 1px solid #000;
}

代码中指定的 box-shadow 属性使 .box 类产生了一个特殊的效果。在这个样本中，出现了一个覆盖在元素左下角的、具有5像素的模糊半径、5像素的水平和垂直偏移和0的扩散程度的外部阴影。同时，元素也具有一个黑色的左边框和底部边框，以使其更加突出。