CSS box-shadow 盒阴影完全指南：从参数顺序到多层立体投影

在 CSS3 中，box-shadow是为元素"加投影"最常用的属性。它不会占用布局空间（不影响盒模型），却能让卡片浮起来、让按钮被按下去、让边框像发光一样贴在元素四周。

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/box-shadow

一、基本语法与参数顺序

完整单层写法：

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

按"记忆口诀"排就是：

box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 阴影颜色 inset/outset;

长度值只写两个 → 解析为x/y偏移；写三个 → 第三个是blur；写四个 → 第四个是spread。

二、每个参数到底在干什么

1. 水平 / 垂直偏移（必写）

决定"光从哪边来，影子落到哪边"。

• 10px 10px→ 右下
• -10px 10px→ 左下
• 0 15px→ 正下方（最像自然光照）

当 x、y 都为 0 时，阴影在正后方；此时若blur/spread非 0，会形成一圈均匀光晕。

2. 模糊半径 blur

不是"阴影变长"，而是"边缘变柔"。

• 0：硬边
• 30px：很大很淡的一团
  规范没有规定精确模糊算法，但效果是"从完整阴影色过渡到完全透明"。

3. 扩展半径 spread（最容易被忽略）

• 正值：阴影整体放大一圈，比如0 0 0 5px等价于一条同色描边
• 负值：阴影收缩，常用来抵消blur向左右溢出的光，做"干净底部阴影"：0 4px 6px -2px rgba(0,0,0,.1)

4. color

别用纯黑#000，现实中的影子是半透明的。
推荐rgba(0,0,0,0.15) ~ rgba(0,0,0,0.25)，深色模式再单独调。

5. inset 内阴影

加了inset，阴影画在：

• 边框之内（即便 border 透明）
• 背景之上
• 内容之下

视觉上像"内容被压进盒子里"，常用于 input 聚焦、按钮按下态。

三、多个阴影：逗号分隔，第一个在最上层

box-shadow:0 2px 4pxrgba(0,0,0,.1),0 4px 8pxrgba(0,0,0,.05);

绘制规则：从后往前画，第一个阴影盖在最上面。
也就是说列表里写在前面的层更"靠近用户"。
多层阴影可以模拟真实环境光：底层大范围淡阴影 + 上层近距离深阴影。

注意：如果一组阴影里"有的 inset 有的不 inset"，列表无法做过渡动画，会直接跳变。

四、和 border-radius 的关系

元素有圆角，阴影自动圆角；border-radius: 0时阴影就是直角。
阴影本身不占布局空间，不会把旁边元素挤开——所以悬浮卡片记得自己留margin，别让阴影盖到邻居。

五、对照你给出的案例

.box1:hover{box-shadow:-10px 10px 30px 5px blue outset;}

• 向左10px、向下10px
• 模糊30px、扩展5px（比原盒大一圈）
• 蓝色外阴影
• outset可写可不写，因为默认就是外阴影

.box2:hover{box-shadow:0 15px 30pxrgba(0,0,0,0.2);}

这是典型的"卡片悬浮"写法：无水平偏移、向下15px、大模糊、半透明黑，看起来像魅族/小米卡片悬浮效果。

六、几个新手易踩的坑

1. inset 位置：放最前或最后都合法，但别塞在颜色前面当颜色用。box-shadow: 0 0 10px #000 inset✅
2. blur 写负：无效，浏览器按0处理。
3. 不写 color：Firefox 用文字色，Chrome 偏透明，Safari 老版本直接不显示，统一显式声明最稳。
4. 想要"只有底边阴影"：靠负spread收住左右溢出，而不是只调 y。
5. 动画性能：hover过渡box-shadow没问题，但别在列表里混用inset/非inset，否则无法插值。

七、一句总结

box-shadow的本质就是：用x/y决定落点，blur决定虚实，spread决定大小，color决定浓度，inset决定内外，逗号决定层数。把它当"光与体积"的工具，而不是"黑色描边"的替代品。

读者互动：

• 如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
• 如果觉得文章有帮助，欢迎点赞鼓励。
• 想与我共同进步，欢迎关注我。