CSS box-shadow完全指南 — 从基础到精美UI效果

你是不是也只会复制粘贴box-shadow？

CSS box-shadow 是大多数开发者"学了个皮毛"的属性。要么从设计稿复制值，要么从Stack Overflow找一个贴上去，能用就行。但如果真正理解每个参数的作用，你能实现的范围会大得多——从现代卡片若隐若现的立体感，到完整的新拟态UI，再到霓虹发光按钮。

边读边实验？ToolPal的CSS Box Shadow生成器提供实时可视化编辑和一键复制CSS。

---

语法完全解析

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

逐个参数精准说明：

offset-x — 阴影的水平偏移。正值向右，负值向左。

offset-y — 阴影的垂直偏移。正值向下（光源在上方的标准），负值向上。

blur-radius — 阴影的模糊程度。0是清晰边缘，值越大越柔和扩散。

spread-radius — 阴影扩展或收缩。正值比元素大，负值比元素小。可选，默认0。

color — 阴影颜色。建议用rgba()或hsla()控制透明度。纯黑（#000）往往显得浑浊。

一个基础阴影：

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

---

inset关键字

在最前面加inset，创建内阴影而不是外阴影：

.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

内阴影的使用场景：

• 文本输入框、textarea（凹陷感）
• 按钮按下状态
• 新拟态的"pressed"状态

---

多层阴影叠加：真实感的秘密

box-shadow最被低估的功能就是用逗号叠加多个阴影：

.realistic-card {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04);
}

这种分层方式模拟了真实阴影的形成方式——随距离增大逐渐变软、透明度降低。只用一个大阴影往往显得平面或不自然。

---

实用UI效果配方

1. 卡片层次感（Material Design风格）

谷歌的Material Design普及了UI元素处于不同"高度"的概念——高度越高，阴影越大越扩散。

/* 默认状态 */
.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.2s ease;
}

/* 悬停状态 */
.card:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

2. 柔和阴影（现代极简设计）

近年趋势是低透明度、大模糊的柔和阴影：

.soft-card {
  background: white;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

带品牌色调的彩色阴影：

.indigo-card {
  background: white;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

3. 暗色模式发光效果

发光效果就是零偏移、大模糊、高饱和度颜色的阴影：

.glow-button {
  background: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
}

霓虹效果，叠加多个颜色：

.neon-element {
  box-shadow:
    0 0 5px #fff,
    0 0 20px #ff00ff,
    0 0 60px #ff00ff;
}

4. 新拟态（Neumorphism）

新拟态（也叫Soft UI）是2020年前后流行的设计趋势。元素背景色与容器相同，同时使用一亮一暗两个阴影：

body {
  background: #e0e5ec;
}

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    8px 8px 16px #b8c0cc,
    -8px -8px 16px #ffffff;
}

按下状态，把阴影翻转到内侧：

.neumorphic-button:active {
  box-shadow:
    inset 4px 4px 8px #b8c0cc,
    inset -4px -4px 8px #ffffff;
}

新拟态的局限：只在灰色系背景上有效。低对比度导致的可访问性问题也值得注意——交互元素难以区分。

5. 硬阴影（复古/粗犷设计）

将模糊去掉，得到清晰的偏移阴影——在大胆图形设计中重新流行的复古风格：

.retro-card {
  background: white;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
}

.retro-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}

6. 焦点环替代方案

常用来替代浏览器默认outline，提供更精致的焦点样式：

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

spread-radius（3px）不带模糊和偏移就能在元素周围创建一个环。确保对比度满足WCAG要求。

---

常见错误

直接使用纯黑（#000）：几乎总是显得奇怪。从rgba(0, 0, 0, 0.1)到rgba(0, 0, 0, 0.3)的范围开始调整。

只用一个大模糊的阴影：单个0 20px 60px rgba(0,0,0,0.3)往往看起来像个污渍。叠加2到4层。

忽视背景色：新拟态效果在元素背景色与容器不同时会崩。

不知道负spread-radius的妙用：负的spread会让阴影内缩，可以实现只在某个方向显示阴影：

/* 只有下方的阴影 */
.bottom-shadow {
  box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);
}

---

性能注意事项

box-shadow在浏览器合成层外渲染，变化时触发重绘。大多数UI里没问题，但在大量元素上同时动画阴影，或作用于大面积元素时，可能造成卡顿。

用filter: drop-shadow()获得GPU加速：

/* filter版本（可GPU合成） */
.card {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
}

filter: drop-shadow()能作用于SVG和透明PNG等不规则形状，这是它的优势。缺点是不支持inset、多阴影叠加和spread-radius。

---

速查表

/* 细腻卡片阴影 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

/* Material Design卡片 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* 多层真实感阴影 */
box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);

/* 发光效果 */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);

/* 新拟态 */
box-shadow: 8px 8px 16px #b8c0cc, -8px -8px 16px #ffffff;

/* 复古硬阴影 */
box-shadow: 4px 4px 0 #000;

/* 焦点环 */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);

/* 只有下方阴影 */
box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);

/* 内阴影按下状态 */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

---

总结

box-shadow是一个五分钟学会基础，多年后仍在发现新技巧的属性。核心要点：

1. 用多层叠加而不是单个大阴影
2. 使用低透明度的rgba()——避免纯黑
3. inset用于输入框和按下状态
4. 负的spread-radius实现方向性阴影
5. 性能敏感的动画考虑filter: drop-shadow()

在CSS Box Shadow生成器里亲自实验，是内化这些模式最快的方式。