CSS 阴影：添加立体感，突出元素效果 | 全面指南

CSS 阴影是一种通过 CSS 样式来为 HTML 元素添加阴影效果的技术。通常，CSS 阴影可以用来增强元素的立体感，使其更加突出和引人注目。

在 CSS 中，可以使用 'box-shadow' 属性来添加阴影效果。该属性需要指定阴影的水平偏移量、垂直偏移量、模糊半径、扩散半径和颜色等参数，如下所示：

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

其中，h-shadow 和 v-shadow 分别表示阴影的水平和垂直偏移量，可以为正数或负数；blur 表示阴影的模糊半径，通常为正数；spread 表示阴影的扩散半径，可以为正数、负数或 0；color 表示阴影的颜色，可以使用颜色值、RGB 值、十六进制值或预定义颜色名。

例如，下面的代码实现了一个带有阴影效果的盒子：

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

该代码中，'.box' 类定义了一个宽高为 200px 的白色盒子，并使用 'box-shadow' 属性添加了一个偏移量为 10px 的黑色阴影，模糊半径为 20px，透明度为 0.5。运行效果如下图所示：