盒子阴影

在 CSS 中，box-shadow 属性用于为元素的框添加阴影效果。你可以使用此属性创建美观的效果，让元素看起来像是从页面中“凸显出来”，或营造出深度和立体感。 

以下是使用 box-shadow 属性的基本语法：

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

• horizontal-offset：阴影与元素之间的水平距离。正值会将阴影向右移动，负值会将阴影向左移动。

• vertical-offset：阴影与元素之间的垂直距离。正值会使阴影向下移动，负值会使阴影向上移动。

• blur（可选）：阴影的模糊半径。值越大，阴影越模糊。如果省略，默认值为 0（不模糊）。

• spread（可选）：阴影的扩展半径。正值会使阴影扩展，负值会使阴影收缩。 

• color（可选）：阴影的颜色。可以使用命名颜色、十六进制值、RGB 值或 HSL 值指定。 
• inset（可选）：将外阴影（outset）改为内阴影。 

例如：

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

在这个示例中，所有 <div> 元素都有盒子阴影，水平偏移量为 5px，垂直偏移量为 5px，模糊半径为 10px，颜色为灰色。类名为 button 的元素有盒子阴影，水平偏移量为 2px，垂直偏移量为 2px，模糊半径为 5px，扩展半径为 2px，颜色为半透明黑色（rgba(0, 0, 0, 0.5)）。