box-shadow 第四个参数是扩散半径，决定阴影投影区域的几何大小：正值向外扩展，负值向内收缩，不改变模糊或透明度。
box-shadow 第四个参数是啥？不是模糊值
很多人把 box-shadow 的第四个参数（扩散半径）当成“更模糊”，其实它和第二个参数（模糊半径）完全不是一回事：模糊半径影响边缘过渡的柔和程度，而扩散半径是实实在在地“撑大”或“收缩”阴影本身的尺寸。
它不改变颜色渐变，也不影响透明度，只决定阴影投影区域的几何大小。正数向外扩展，负数向内收缩（可能被裁掉）。
扩散半径为负值时会发生什么
负扩散半径会让阴影向元素边界内收，容易出现“阴影被截断”或“完全看不见”的情况——尤其当值过大或元素有 overflow: hidden 时。
-
box-shadow: 0 0 10px -5px #000：阴影本体缩小 5px，若原元素宽高刚好卡死，阴影可能全被裁掉 - 圆角元素（
border-radius）加负扩散，阴影边缘会比内容区更“锐利”，甚至露出直角 - 配合
inset使用时，负扩散会让内阴影更紧贴边框，但超过border-width就开始失效
和模糊半径搭配使用的常见误区
模糊半径（第二个参数）和扩散半径（第四个参数）数值接近时，视觉上容易混淆，但行为完全不同：
-
box-shadow: 0 0 8px 0 #000→ 无扩散、有模糊，边缘虚化但大小不变 -
box-shadow: 0 0 0 8px #000→ 无模糊、纯色硬边阴影，比元素大 16px（左右各+8px） -
box-shadow: 0 0 4px 4px #000→ 先扩散出一块实色矩形，再对它的边缘做 4px 模糊，结果比上面两种都厚实
性能上，扩散本身不增加绘制开销，但叠加大模糊值后，GPU 渲染压力会上升；移动端尤其要注意 box-shadow: 0 0 20px 10px 这类组合。
实际调试时怎么快速验证扩散效果
别靠肉眼猜，用高对比临时值直接看轮廓：
- 先把模糊设为
0：box-shadow: 0 0 0 4px red，红色硬边能清楚显示扩散后的实际形状 - 再逐步加模糊，观察边缘如何“融化”而不改变主体大小
- 在 Chrome DevTools 里选中元素，勾选
Show shadow boundaries（需开启 Rendering 面板中的 Paint Flashing 或 Shadow Boundaries） - 注意：Firefox 不显示扩散边界，Safari 对负扩散渲染更保守，建议多端实机检查
扩散半径真正难搞的地方不在语法，而在它和 border-radius、transform: scale()、父容器 clip-path 之间的隐式交互——这些地方一不留神，阴影就消失得莫名其妙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
