CSS 阴影教程：box-shadow 偏移、模糊、扩展参数一次讲清
一句话答案
box-shadow 的写法是“水平偏移 垂直偏移 模糊 扩展 颜色”，例如 8px 8px 24px 0px rgba(0,0,0,0.25)；加 inset 变成内阴影。用 CSS 阴影生成器拖动滑块，实时预览后复制代码。
卡片、按钮、弹窗加上一点阴影就有了层次感，但 box-shadow 的几个数字分别是什么意思，很多人每次都要查。CSS 阴影生成器 可以拖动滑块实时预览，直接复制生成的代码。
box-shadow 的参数
box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.25);| 位置 | 参数 | 含义 |
|---|---|---|
| 1 | 水平偏移 | 正数向右，负数向左 |
| 2 | 垂直偏移 | 正数向下，负数向上 |
| 3 | 模糊 | 越大阴影边缘越柔和，不能为负 |
| 4 | 扩展 | 正数阴影变大，负数阴影变小 |
| 5 | 颜色 | 常用带透明度的 rgba 黑色 |
| 可选 | inset | 写在最前面，变成内阴影 |
操作步骤
- 调整偏移：打开 CSS 阴影生成器，拖动“水平偏移”“垂直偏移”，默认都是 8。
- 调整模糊和扩展：“模糊”默认 24，“扩展”默认 0。
- 设置颜色和透明度：选择阴影颜色，“透明度”默认 25（即 0.25）；需要内阴影时勾选“内阴影”。
- 复制代码：上方预览实时更新，满意后点击“复制 CSS”。
🔲 CSS 阴影生成器
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
常用写法参考
| 效果 | 代码 |
|---|---|
| 轻微卡片阴影 | box-shadow: 0 1px 3px rgba(0,0,0,0.12); |
| 悬浮卡片 | box-shadow: 0 8px 24px rgba(0,0,0,0.15); |
| 内阴影（输入框按下） | box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); |
| 只在下方的阴影 | box-shadow: 0 6px 6px -4px rgba(0,0,0,0.2); |
多个阴影可以用逗号分隔叠加，例如一层近处的小阴影加一层远处的大阴影，看起来更自然。
注意事项
- 阴影不占布局空间：不会推开周围元素，但可能被父元素的 overflow: hidden 裁掉；
- 配合圆角：阴影会跟随 border-radius 的形状，参考 CSS 圆角；
- 深色模式：深色背景上黑色阴影几乎看不见，可以改用更亮的边框或背景色区分层次；
- 性能：大模糊半径的阴影在大量元素上做动画时可能卡顿，尽量只对少量元素使用。
常见问题
box-shadow 四个数字分别是什么？
依次是水平偏移、垂直偏移、模糊半径和扩展半径，后面再跟颜色；前面加 inset 表示内阴影。
怎么让阴影只出现在下方？
水平偏移设为 0，垂直偏移设为正数，再用负的扩展值把左右两侧收进去，例如 0 6px 6px -4px。
阴影颜色为什么常用 rgba？
rgba 可以设置透明度，半透明的黑色阴影能自然地叠在各种背景色上，比纯灰色更真实。
生成的 CSS 兼容哪些浏览器？
box-shadow 是标准 CSS 属性，Chrome、Edge、Firefox、Safari 的现代版本都支持。