1. 介绍
box-shadow是CSS3新增的属性，它可以给元素添加阴影效果。通过设置box-shadow属性的值，我们可以控制阴影的形状、大小、颜色和透明度等参数，从而实现更加丰富的页面效果。
2. 语法
box-shadow属性的语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
其中，h-shadow和v-shadow控制阴影的水平和垂直偏移量，blur控制阴影的模糊程度，spread控制阴影的扩展程度，color控制阴影的颜色，inset可选，表示将阴影设置为内部阴影。
我们可以为box-shadow属性设置多个阴影，多个阴影之间使用逗号进行分隔，例如：
box-shadow: 10px 10px 5px #888888, -10px -10px 5px #888888;
这个例子中，我们为元素添加了两个阴影，一个向右和下偏移10像素，一个向左和上偏移10像素，两个阴影的颜色均为#888888，模糊程度为5像素。
3. 参数详解
3.1 h-shadow和v-shadow
h-shadow和v-shadow分别控制阴影的水平和垂直偏移量，可为正数或负数，如果为正数，表示阴影向元素的右边（水平）或底部（垂直）偏移，如果为负数，则表示阴影向元素的左边（水平）或顶部（垂直）偏移。例如：
box-shadow: 10px 10px #888888;
box-shadow: -10px -10px #888888;
这个例子中，我们分别设置了向右下偏移和向左上偏移10像素的阴影。
3.2 blur
blur控制阴影的模糊程度，可为0或正数，如果为0，则阴影不模糊，如果为正数，则表示阴影的模糊程度，数值越大，越模糊。例如：
box-shadow: 10px 10px 5px #888888;
这个例子中，我们设置了向右下偏移10像素、模糊程度为5像素、颜色为#888888的阴影。
3.3 spread
spread控制阴影的扩展程度，可为0或正数，如果为0，则阴影不扩展，如果为正数，则表示阴影的扩展程度，数值越大，阴影越大。例如：
box-shadow: 10px 10px 5px 0 #888888;
box-shadow: 10px 10px 5px 10px #888888;
这个例子中，我们分别设置了不扩展和扩展10像素的阴影。
3.4 color
color控制阴影的颜色，可以使用CSS中的任何一种颜色表示方式，例如颜色名称、十六进制、RGB等。例如：
box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px red;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
这个例子中，我们分别使用了颜色值#888888、颜色名称red、RGBA表示方法表示了一个半透明的黑色阴影。
3.5 inset
inset可选，表示将阴影设置为内部阴影。如果使用inset，则阴影会出现在元素内部而不是外部。例如：
box-shadow: inset 10px 10px 5px #888888;
这个例子中，我们设置了一个颜色为#888888、模糊程度为5像素、向右下偏移10像素、内部阴影的阴影。
4. 实例演示
下面是一些使用box-shadow属性实现的实例演示：
4.1 阴影按钮
下面是一个使用box-shadow属性实现的阴影按钮效果，鼠标悬停时，按钮会出现阴影效果：
.btn {
display: inline-block;
padding: 8px 16px;
font-size: 16px;
background-color: #2196F3;
color: #ffffff;
border: none;
cursor: pointer;
transition: box-shadow 0.2s ease-in-out;
}
.btn:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
这个例子中，我们设置了一个具有圆角、无边框、蓝色背景、白色文字的按钮，并且为按钮定义了一个在鼠标悬停时出现的阴影效果。
4.2 盒子阴影
下面是一个使用box-shadow属性实现的盒子阴影效果：
.box {
width: 300px;
height: 200px;
background-color: #ffffff;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
}
这个例子中，我们设置了一个300像素宽、200像素高、白色背景、带有10像素模糊和5像素扩展的黑色阴影的盒子。
5. 总结
box-shadow是CSS3新增的属性，可以为元素添加阴影效果。通过调整box-shadow属性的各个值，我们可以控制阴影的形状、大小、颜色和透明度等参数，从而实现更加丰富的页面效果。