CSS3 Drop 阴影

使用 CSS3，你可以将阴影应用于元素。

使用 CSS3 Drop Shadows

CSS3 使你能够像在 Photoshop 中一样在不使用任何图像的情况下为元素添加阴影效果。在 CSS3 之前，切片图像用于在元素周围创建非常烦人的阴影。

以下部分将介绍如何在文本和元素上应用阴影。

CSS3 box-shadow 属性

box-shadow 属性可用于向元素框添加阴影。你甚至可以使用以逗号分隔的阴影列表来应用多个阴影效果。创建框阴影的基本语法可以通过以下方式给出：

box-shadow: offset-x offset-y blur-radius color; 

box-shadow 属性部分具有以下含义：

• offset-x - 设置阴影的水平偏移。
• offset-y - 设置阴影的垂直偏移量。
• blur-radius - 设置模糊半径。值越大，模糊越大，阴影边缘越模糊。不允许使用负值。
• color - 设置阴影的颜色。如果省略或未指定颜色值，则它将采用 color 属性的值。

请参阅 CSS3 box-shadow 属性以了解有关其他可能值的更多信息。

.box{
    width: 200px;
    height: 150px;
    background: #ccc;
    box-shadow: 5px 5px 10px #999;
}

注意： 当添加 box-shadow 时，如果未指定 blur-radius 的值或其设置为零（0），则阴影的边缘将变得清晰。

同样，你可以使用逗号分隔列表添加多个框阴影：

.box{
    width: 200px;
    height: 150px;
    background: #000;
    box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

CSS3 text-shadow 属性

你可以使用 text-shadow 属性将阴影效果应用于文本。你还可以使用同 box-shadow 相同的表示法将多个阴影应用于文本。

h1 {
    text-shadow: 5px 5px 10px #666;
}
h2 {
    text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}