CSS 盒阴影无需试错即可获得真实效果

发布日期 2026年5月2日

阴影是CSS属性中看起来简单，但当你看到结果像2008年的剪贴画时，就会变得复杂。语法简洁，但每个值的实际作用以及它们之间的相互关系并不明显。以下是编写看起来经过深思熟虑而非简单粘贴的阴影的方法。

语法解析

box-shadow: offset-x offset-y blur-radius spread-radius color;

五个值。让我们对每个值进行精确说明：

offset-x：阴影在水平方向上的偏移距离。正值向右移动，负值向左移动。
offset-y：阴影在垂直方向上的偏移距离。正值向下移动。
blur-radius：使阴影柔和。在 0时，边缘是硬的。更高的值会使用高斯模糊向外扩展阴影形状。
spread-radius：扩展或收缩阴影的大小 通知团队完成之前 模糊效果。正值使阴影大于元素本身，负值使其更小。
color：阴影的颜色。一个常见的错误是使用纯黑色。
inset：一个可选的关键词，将阴影从元素外部翻转到内部。

模糊与扩展：导致阴影看起来奇怪的混淆

这两个值是大多数“为什么看起来奇怪”时刻的根源。

模糊使阴影变得柔和。它模拟光线扩散——离光源越远，阴影越扩散。在小元素上 blur-radius ）和连续录制（ 8px 的模糊效果与在大元素上的效果完全不同。

扩展扩大或缩小基础阴影形状。如果你试图营造一个“远处且柔和”的阴影效果，仅增加模糊而不使用负扩展，会导致阴影超出元素边界，看起来不真实。轻微的负扩展会将其拉回，使模糊从一个更自然的基底开始。

通常正确的组合是适度的模糊，搭配零或轻微负扩展。这正是现实世界中阴影的工作方式——它们在距离上更柔和，但不会超出投射它们的物体。

让阴影看起来自然

为看起来有目的性的阴影制定三条规则：

1. 不要使用纯黑色。 真实的阴影会拾取环境颜色。深海军蓝或深暖灰色在 0.10–0.15 透明度下看起来像阴影，而不是像被压印的形状。尝试 rgba(0, 0, 0, 0.12) 作为起点，然后略微调整色调，使其更暖或更冷，以匹配你的配色方案。

2. 保持单一光源方向。 如果不同元素上的阴影朝向不同，页面看起来就不一致。选择一个方向——通常为正 offset-y (从上方来的光)——并系统性地保持一致。

3. 保持透明度较低。 全透明度的阴影看起来像边框。如果你能清晰看到一个硬边缘，说明你可能过于透明或模糊为零。真实的阴影是微妙的——它们赋予体积，而不是轮廓。

叠加多个阴影以增加层次感

CSS允许在一个元素上使用逗号分隔的多个阴影层。这样你可以在不产生视觉伪影的情况下获得真正的立体感。

不要使用一个大阴影，而是尝试两个：一个紧贴的阴影用于接触，一个扩散的阴影用于提升感。

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

第一层将元素固定在表面，第二层则营造出它浮在上方的感觉。这两个阴影层都不是孤立存在的——它们共同创造出深度的错觉。物理上，这模仿了强光源在近距离下产生紧贴的阴影，而环境光则在更远处形成柔和的光环。

内阴影：当光线方向反转时

这 inset 关键词将阴影绘制在元素边框内部，而不是外部。主要应用场景包括：

按下按钮状态：在 :active 上添加一个浅层内阴影，能产生类似真实按钮点击的物理感。
输入框深度：表单输入框和文本区域通过顶部边缘的内阴影显得从表面凹陷出来——这一模式源自 skeuomorphic 设计，但依然清晰可读。

/* Pressed button */
button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Input field depth */
input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

性能：何时使用 filter: drop-shadow

box-shadow 触发重绘每次变化都会发生——不仅在元素本身，也在其下方的绘制层上。对于动画或滚动密集的界面，这会带来可观的成本。

filter: drop-shadow() 在GPU合成器上运行，动画阴影的成本显著更低。它还遵循元素的实际渲染形状（包括透明区域），而 box-shadow 始终遵循元素的矩形边界框。

实际规则：在布局元素上的静态阴影使用 box-shadow 。在需要阴影与视觉形状而非边界框匹配的动画元素或SVG上使用 filter: drop-shadow 。

设计系统中的阴影令牌

为每个组件硬编码阴影值会导致不一致。定义一组有限的层级令牌，然后在各处引用它们。

:root {
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.04);

  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.06);

  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);

  --shadow-xl:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.06);

  --shadow-2xl:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 32px 80px rgba(0, 0, 0, 0.08);
}

每个令牌都采用两层方法：一个紧贴的阴影用于接触支撑，一个扩散的阴影用于提升。随着层级升高，模糊和透明度也相应增加——距离表面越远，阴影越柔和且越扩散。

这些值在白色和浅灰色背景上表现良好。在深色背景上，应反转逻辑——使用较浅的半透明颜色作为内阴影，而不是使用深色作为投射阴影。