box-shadow 的模糊半径（blur-radius）控制边缘柔和度，不改变阴影尺寸；真正实现“扩散”需依赖扩展半径（spread-radius），二者配合使用才能获得自然的光影效果。
box-shadow 模糊半径越大，阴影越“虚”但不等于“扩散”
很多人调大 blur-radius 发现阴影变淡、边缘发散，就以为是“扩散效果”，其实不是。CSS 的 box-shadow 本质是高斯模糊 + 颜色叠加，模糊半径只控制边缘柔和度，不改变阴影的原始尺寸或位置。真要让阴影“向外撑开”，得靠 spread-radius —— 它才是控制阴影几何扩张的关键参数。
常见错误现象：box-shadow: 0 0 20px #000; 看起来像扩散，其实是模糊太强导致视觉误判；实际阴影面积没变，只是边缘被“吃掉”了。
-
blur-radius影响的是模糊程度，值为 0 时边缘锐利，越大越朦胧 -
spread-radius才真正扩大阴影的矩形范围，正值向外扩展，负值向内收缩 - 两者同时存在时，先按
spread-radius扩展基础形状，再用blur-radius对其边缘做模糊
实现真正“扩散感”：blur-radius 和 spread-radius 要配合用
纯靠模糊半径做“扩散”容易让阴影发灰、失焦；纯靠扩展半径又太生硬。真实可用的扩散效果，是用较小的 spread-radius 做几何扩张，再叠一个中等 blur-radius 柔化边缘。
使用场景：按钮悬停放大时的阴影延展、卡片浮起动画、模态框背光扩散。
示例（对比明显）：
/* 纯模糊 → 发虚不扩散 */ box-shadow: 0 0 40px rgba(0,0,0,0.3); <p>/<em> 模糊+扩展 → 真正向外撑开 </em>/ box-shadow: 0 0 20px 10px rgba(0,0,0,0.2);</p>
- 第二个参数是
blur-radius（20px），第三个是spread-radius（10px） - 扩展值建议控制在 blur 值的 1/3～1/2，避免边缘出现“双轮廓”硬边
- 透明度要同步调低，否则扩展后颜色堆积过重
多层 box-shadow 叠加能模拟更自然的扩散渐变
单层 box-shadow 是均匀模糊，而真实光晕常有近实远虚的层次。这时用两层甚至三层不同 spread-radius 和 blur-radius 的阴影叠加，比调单层参数更容易控制过渡节奏。
性能影响：现代浏览器对多层阴影优化较好，但超过 3 层且都带大模糊时，滚动或动画可能轻微掉帧。
- 外层：大
blur-radius+ 小spread-radius（如0 0 60px 5px），负责远距离柔光 - 内层：小
blur-radius+ 中等spread-radius（如0 0 12px 6px），负责近场支撑感 - 所有层透明度总和别超 0.5，否则背景被盖住
移动端和 Safari 的 spread-radius 兼容性要注意
spread-radius 在 iOS Safari 13.4+ 和 Android Chrome 80+ 支持良好，但老版本 Safari（尤其 iOS 12 及更早）会忽略该值，只渲染模糊部分，导致扩散失效。
错误现象：开发时看着正常，真机测试发现阴影“缩回去了”。
- 兼容方案：用伪元素
::after绘制一个稍大的同色块，再对其加模糊，模拟扩展效果 - 检测方式：在目标设备上打印
getComputedStyle(el).boxShadow，看是否包含第三个数值 - 不推荐降级为
filter: drop-shadow()，它不支持spread-radius，且无法精确控制扩展量
扩散效果的复杂点不在参数本身，而在 blur 和 spread 的比例关系——差 2px 可能就从“轻盈”变成“脏边”。调的时候盯着边缘像素，比看整体更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
