CSS属性box-shadow的参数详解_阴影效果与视觉层次技巧

box-shadow通过设置水平垂直偏移、模糊与扩展半径、颜色及内外阴影，可创建立体悬浮、内凹按下等效果，结合多层叠加与透明色提升真实感，广泛用于卡片、按钮等UI元素的视觉层次构建。

box-shadow 是 CSS 中用于为元素添加阴影效果的重要属性，它不仅能增强界面的视觉层次感，还能模拟出立体、悬浮等设计效果。掌握其参数配置和使用技巧，能显著提升网页的视觉表现力。

box-shadow 基本语法与参数说明

box-shadow 属性的基本语法如下：

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

所有参数按顺序书写，用空格分隔，其中部分参数可选。具体含义如下：

• h-offset（水平偏移）：阴影在水平方向的偏移量。正值向右，负值向左。
• v-offset（垂直偏移）：阴影在垂直方向的偏移量。正值向下，负值向上。
• blur（模糊半径）：值越大，阴影越模糊。0 表示无模糊，边缘清晰。
• spread（扩展半径）：控制阴影的尺寸扩展或收缩。正值扩大阴影，负值缩小。
• color（颜色）：阴影的颜色，支持所有 CSS 颜色格式（如 #fff、rgba、hsl 等）。
• inset（可选关键字）：如果添加此值，阴影将变为内阴影，否则为外阴影。

例如：box-shadow: 2px 4px 8px 1px rgba(0,0,0,0.2); 表示一个向右偏移 2px、向下 4px、模糊 8px、扩展 1px 的黑色半透明外阴影。

立即学习“前端免费学习笔记（深入）”；

创建自然的投影效果

为了实现更接近真实光照的阴影，建议使用低透明度的黑色（如 rgba(0,0,0,0.1) 到 0.3），避免纯黑导致生硬感。

• 轻微偏移 + 适度模糊：适合按钮或卡片的轻微浮起效果，例如 box-shadow: 0 2px 6px rgba(0,0,0,0.1)。
• 多层阴影叠加：通过逗号分隔多个阴影值，模拟主影与环境光，增加真实感。例如：

box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);

这种组合能表现出近处深影与远处浅影的层次，常见于 Material Design 风格设计中。

利用内阴影实现凹陷与嵌入感

添加 inset 关键字后，阴影会出现在元素内部，常用于模拟按钮按下、输入框凹陷等效果。

• 模拟按钮按下：设置垂直偏移为正，并搭配模糊与颜色，例如：

box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);

• 输入框聚焦效果：可配合 border 使用，增强交互反馈：

box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);

注意：内阴影不会影响元素本身的布局，也不会溢出容器，适合精细修饰。

视觉层次与 UI 设计中的应用技巧

阴影是构建视觉层级的关键工具，尤其在卡片式布局、模态框、浮动菜单中广泛应用。

• 层级越高，阴影越强：通过增大模糊和偏移值，表示元素“浮”得更高，如弹窗应比背景卡片阴影更明显。
• 响应式适配：在移动端可适当减小阴影强度，避免视觉过重。
• 性能考虑：box-shadow 由 GPU 加速渲染，通常性能良好，但避免在大量动态元素上频繁更改阴影值。

合理使用 box-shadow，能让界面更具深度和交互引导性。

基本上就这些，灵活运用参数组合，就能创造出丰富而细腻的视觉效果。