CSS3中的box-shadow属性详解及示例代码

box-shadow是CSS3中一个非常有用的属性，它用于在元素周围创建阴影效果。通过使用box-shadow，可以轻松地为元素添加阴影，从而增强页面的视觉效果。在本文中，我们将详细介绍box-shadow属性的用法，并提供一些示例代码以帮助您更好地理解。

box-shadow属性的语法如下：

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

其中，各个参数的含义如下：

• h-shadow: 水平阴影的位置，可以为正数（右侧阴影）或负数（左侧阴影）。
• v-shadow: 垂直阴影的位置，可以为正数（下方阴影）或负数（上方阴影）。
• blur: 模糊距离，用于创建更柔和的阴影效果。可以为0（无模糊）或正数。
• spread: 阴影的尺寸扩展。可以为0（与元素尺寸相同）或正数。
• color: 阴影的颜色。可以使用具体的颜色值（如#000000）或预定义的颜色名称（如red、blue等）。
• inset（可选）: 指定阴影是否为内阴影。如果设置为inset，则阴影将显示在元素内部。

下面是一些示例代码，展示了如何使用box-shadow属性创建不同类型的阴影效果：

1. 创建简单的阴