CSS盒子阴影

在CSS中，使用 box-shadow 属性可以为元素添加阴影效果。它的基本语法如下：

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

• h-offset：阴影相对于元素的水平偏移量（可以是负值）。
• v-offset：阴影相对于元素的垂直偏移量（可以是负值）。
• blur：阴影的模糊程度，数值越大，阴影越模糊。
• spread：阴影的扩展距离，正值表示阴影向外扩展，负值表示阴影向内收缩。
• color：阴影的颜色，可以使用颜色值（如 #000, rgba(0, 0, 0, 0.5)）。

例如：

.box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.3);
}

上述代码为 .box 元素添加了一个阴影，阴影向右下偏移10px，模糊度为15px，扩展5px，颜色为半透明黑色。

你还可以添加多个阴影，通过逗号分隔：

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 0, 0, 0.2);

这会为元素添加两个不同的阴影效果，一个是黑色阴影，一个是红色阴影。