CSS Box Shadow完全指南：从基础到高级阴影效果
2026年2月 · 阅读时间 4分钟
Box Shadow是CSS中最常用的视觉效果之一。一个好的阴影能让卡片、按钮、弹窗看起来更有层次感和质感。
基础语法
box-shadow: [x偏移] [y偏移] [模糊半径] [扩展半径] [颜色] [inset];
- x偏移 — 水平方向，正值向右，负值向左
- y偏移 — 垂直方向，正值向下，负值向上
- 模糊半径 — 值越大阴影越模糊柔和（默认0，锐利边缘）
- 扩展半径 — 阴影大小，正值扩大，负值缩小（可选）
- 颜色 — 推荐用rgba或hsla带透明度
- inset — 内阴影（可选）
常用阴影效果
Subtle
0 1px 3px rgba(0,0,0,0.12)Medium
0 4px 6px -1px rgba(0,0,0,0.1)Large
0 10px 25px -5px rgba(0,0,0,0.1)Elevated
0 20px 50px -12px rgba(0,0,0,0.25)高级技巧
多层阴影
用逗号分隔多个阴影，创造更自然的效果：
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);
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);
彩色阴影
用元素本身的颜色做阴影，效果更生动：
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
内阴影（Inset）
创造凹陷效果，常用于输入框和按钮按下状态：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
性能注意事项
⚠️ box-shadow会触发重绘（repaint），大量使用可能影响性能
⚠️ 模糊半径越大，渲染成本越高
💡 动画阴影时，考虑用伪元素+opacity代替直接动画box-shadow
💡 Tailwind CSS提供了优化好的阴影类：shadow-sm/md/lg/xl/2xl
在线生成器
手写box-shadow参数太麻烦？用我们的 Box Shadow可视化生成器，拖动滑块实时预览效果，一键复制CSS代码。
更多设计工具请访问 www.cyunyun.com。