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;

参数	必选	说明	取值规则
`offset-x`	✅	水平偏移	正值向右，负值向左
`offset-y`	✅	垂直偏移	正值向下，负值向上（CSS 的 y 轴朝下）
`blur-radius`	❌	模糊半径	默认 0（硬边），不能为负，越大越淡
`spread-radius`	❌	扩展半径	默认 0，正值膨胀、负值收缩
`color`	❌	阴影颜色	不写时多数浏览器取 color 属性值，Safari 可能透明，建议永远显式写
`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 4px rgba(0,0,0,.1),
            0 4px 8px rgba(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 30px rgba(0,0,0,0.2);
}

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

六、几个新手易踩的坑

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

七、一句总结

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

读者互动：

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