box-shadow 第四个参数是 spread radius，控制阴影边缘的扩张或收缩：正数向外扩张，负数向内收缩，0为默认不扩张；它只改变阴影主体尺寸，不影响模糊区域。
box-shadow 第四个参数是 spread radius，控制阴影边缘的扩张或收缩
很多人调 box-shadow 时只写三个值（偏移X、偏移Y、模糊半径），结果阴影“糊”得没形，或者想加个硬边框式阴影却始终出不来——问题往往就卡在漏掉了第四个参数：spread-radius。它不是可选的“锦上添花”，而是决定阴影是否“撑开”或“收紧”的关键变量。
- 正数会让阴影整体向外均匀扩张，比如
box-shadow: 0 0 10px 4px #000的阴影比模糊半径本身还宽出 4px - 负数会向内收缩，可能让阴影缩进元素边界，甚至部分消失；
-2px常用于模拟“压陷感”或紧贴边框的描边效果 - 设为
0（默认）时，阴影只按模糊半径自然弥散，不额外扩张 - 注意：spread 不影响模糊过渡区域的宽度，只改变阴影“主体”的尺寸；模糊仍由第三个参数单独控制
为什么加了 spread 却看不出变化？常见原因
不是参数没生效，而是视觉干扰太强，或者单位/取值不合理。
- 模糊半径（第三个参数）太大，盖过了 spread 的几何变化；建议先设
blur-radius为0，纯看 spread 效果 - 颜色透明度太高（如
rgba(0,0,0,0.1)），扩张后颜色更淡，肉眼难分辨；临时换成不透明色调试 - 元素本身有
border或outline，和 shadow 重叠导致误判；可用outline: 1px solid red辅助定位阴影边界 - 父容器设置了
overflow: hidden，把扩散出去的阴影直接裁掉了——这是最常被忽略的布局陷阱
spread 在实际 UI 中的典型用法
它不是炫技参数，而是解决具体表现问题的工具。
- 模拟卡片“浮起”效果：
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05)—— 负 spread 让主阴影收窄，叠加一层细边线增强立体感 - 按钮按下态（inset 效果）：
box-shadow: inset 0 2px 4px -2px rgba(0,0,0,0.2)，负 spread 配合inset让阴影向内“凹” - 替代
border实现响应式描边：用box-shadow: 0 0 0 2px #3b82f6，好处是不占布局空间、支持圆角继承、且可单独控制虚实（配合filter: drop-shadow()还能绕过 overflow 裁剪）
兼容性与性能提醒
spread-radius 在所有现代浏览器中都支持（Chrome 10+、Firefox 4+、Safari 5.1+），但有两个现实约束：
立即学习“前端免费学习笔记（深入）”；
- IE 仅支持到
box-shadow的前三项，第四个参数会被整个忽略（IE10+ 才开始支持 full syntax） - 超大 spread 值（如 >100px）在低端设备上可能触发重绘变慢，尤其配合动画时；避免用
transition: box-shadow动 spread + blur 双变量 - 如果需要在伪元素上做扩散阴影，注意
::before/::after默认无尺寸，必须显式设content: ""和宽高，否则 spread 无处可扩
transform、scale 或 zoom 影响而等比缩放；如果你在缩放容器里调试阴影，记得检查是否被间接拉伸了。 
