CSS box-shadow 完全指南：用生成器告别反复调参

每次写 box-shadow 时，你是不是都要打开 DevTools 慢慢调四个数字？偏移、模糊、扩散、颜色……光靠感觉很难一次到位。Box Shadow 在线生成器让你拖拽调参、实时预览，直接复制可用代码。

语法拆解

box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>;

值	说明
`inset`	可选。将阴影绘制在元素内部。
`offset-x`	水平偏移。正值向右，负值向左。
`offset-y`	垂直偏移。正值向下，负值向上。
`blur-radius`	可选（默认 0）。值越大，边缘越柔和。
`spread-radius`	可选（默认 0）。正值扩大，负值收缩。
`color`	任意 CSS 颜色，推荐用 `rgba()` 控制透明度。

常见效果写法

卡片投影（最常用）

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

两层叠加：一层贴近底部的紧凑阴影，一层稍远的环境阴影。这是 Material Design 海拔系统的核心思路。国内大量中台组件库（Ant Design、Arco Design）的卡片阴影都源于类似写法。

inset 内阴影

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

常用于输入框、按压态按钮，营造”凹入”感。移动端 App 中的搜索栏背景大量使用这种效果。

硬阴影（无模糊）

box-shadow: 4px 4px 0 #000;

blur 为零，阴影完全锐利。新潮的”拟物复古”风格（Neubrutalism）设计大量使用。如果你在做独立产品的落地页，这个风格眼下很流行。

发光效果

box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.5);

两个 offset 都为零，阴影向四周均匀扩散。搭配品牌色做悬停态，是暗色主题下最常见的交互反馈。

多层阴影叠加

box-shadow 支持逗号分隔叠加多层，可以模拟更自然的光影层次：

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07),
  0 8px 16px rgba(0, 0, 0, 0.07);

每层偏移和模糊翻倍，透明度相同，叠加后过渡平滑。这是 Tania Rascia 等前端工程师总结的经典配方。

性能注意事项

box-shadow 会触发重绘（Paint）但不触发重排（Layout）。在已合成的图层（如带 transform 或 will-change: transform 的元素）上，大多数浏览器会硬件加速阴影渲染。

如果需要动画，不要直接 transition: box-shadow——低端设备掉帧明显。推荐方案是用伪元素承载阴影，动画 opacity：

.card {
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.25s;
  border-radius: inherit;
}
.card:hover::after {
  opacity: 1;
}

为什么用生成器

手动调四个数字加颜色，每次改完还要回到浏览器刷新验证——这个循环太慢了。生成器的优势：

拖拽控制偏移，实时看效果
滑块调节模糊和扩散
一键切换 inset 模式
直接复制 CSS，不用手敲

立即打开生成器 →

速查表

效果	CSS
基础投影	`box-shadow: 0 4px 6px rgba(0,0,0,0.1)`
内阴影	`box-shadow: inset 0 2px 4px rgba(0,0,0,0.15)`
发光	`box-shadow: 0 0 8px 2px rgba(99,102,241,0.4)`
硬阴影	`box-shadow: 3px 3px 0 #000`
移除阴影	`box-shadow: none`