一、CSS3的box-shadow属性
CSS3引入了一种名为box-shadow的属性，用于实现阴影效果。在CSS3之前，实现元素阴影效果通常需要使用图片，这种方法存在制作繁琐、加载慢、难以维护等问题。而使用box-shadow属性可以轻松地实现元素阴影效果，避免了上述问题。
box-shadow属性可以设置多个值来实现不同的阴影效果。以下是box-shadow属性的语法：
box-shadow: h-shadow v-shadow blur spread color inset;
1. h-shadow
h-shadow用于设置阴影水平方向的偏移量，单位为px。如果h-shadow为正数，阴影就位于元素右侧；如果为负数，则阴影位于元素左侧。以下代码为实现阴影向右侧偏移10px的效果：
.box {
box-shadow: 10px 0px 0px 0px rgba(0,0,0,0.6);
}
解释一下代码中的rgba(0,0,0,0.6)。其中，第一个参数为红色通道的值，第二个参数为绿色通道的值，第三个参数为蓝色通道的值，第四个参数为alpha透明度通道的值，取值范围为0~1。因此，rgba(0,0,0,0.6)表示黑色，透明度为0.6。
2. v-shadow
v-shadow用于设置阴影垂直方向的偏移量，单位为px。如果v-shadow为正数，阴影就位于元素下方；如果为负数，则阴影位于元素上方。以下代码为实现阴影向下方偏移10px的效果：
.box {
box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.6);
}
3. blur
blur用于设置阴影的模糊半径，单位为px。值越大，阴影越模糊；值越小，阴影越清晰。以下代码为实现阴影模糊半径为10px的效果：
.box {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.6);
}
4. spread
spread用于设置阴影的扩散半径，单位为px。如果spread为正数，阴影扩散范围变大；如果为负数，阴影收缩范围变小。以下代码为实现阴影扩散半径为10px的效果：
.box {
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.6);
}
5. color
color用于设置阴影的颜色。可选值为颜色名、十六进制值、rgb/rgba值等。例如：
.box {
box-shadow: 0px 0px 10px 0px #000000;
}
以上代码中，#000000为黑色的十六进制值。
6. inset
inset是一个可选值，如果设置为inset，则实现内阴影效果。如果不设置inset，则实现外阴影效果。以下代码为实现内阴影效果的效果：
.box {
box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.6);
}
二、鼠标悬停时的阴影效果
在前面的代码中，我们已经实现了一个10px的黑色阴影效果。下面，我们将实现一个鼠标悬停时出现阴影效果的例子。
首先，我们需要为元素设置一个初始的阴影效果。以下代码为实现一个3px的灰色阴影效果：
.box {
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.6);
}
接下来，我们要为鼠标悬停时的状态设置阴影效果。在CSS中，我们可以使用:hover伪类来实现当元素被鼠标悬停时应用的样式。以下代码为实现鼠标悬停时出现10px的黑色阴影效果：
.box:hover {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.6);
}
在上述代码中，我们为.box元素设置了:hover伪类，表示当该元素被鼠标悬停时应用指定的样式。样式中的box-shadow属性的值与初始的阴影样式略有不同，增加了模糊半径和扩散半径的值，实现了更加明显的阴影效果。
最终的HTML和CSS代码如下：
<div class="box">
<p>这是一个阴影效果的例子。</p>
</div>
.box {
width: 300px;
height: 200px;
background: #ccc;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.6);
}
.box:hover {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.6);
}
效果如下图所示：
三、总结
通过使用CSS3的box-shadow属性，可以实现元素阴影效果。box-shadow属性是一个十分强大的属性，可以设置多个值来实现不同的阴影效果。在实际项目开发中，阴影效果是一个十分常用的效果，掌握box-shadow属性的使用方法可以为我们节省不少制作时间和维护成本。