spread-radius设为正值时阴影向外等比例扩张，是几何尺寸的真实增大而非错觉；例如box-shadow: 0 0 8px 4px rgba(0,0,0,0.1)中阴影宽高各增加8px，造成“胀出感”，需配合blur-radius和低透明度color协同控制以实现自然光影效果。
spread-radius 设为正值时，阴影会向外等比例扩张，但容易让元素看起来“撑出边界”，不是错觉，是几何扩张的真实表现。
为什么 spread-radius 一调大就显得“溢出”
spread-radius 控制的是阴影轮廓的硬边尺寸——它不模糊、不透明、不渐变，就是把阴影的矩形基底直接放大。比如 box-shadow: 0 0 8px 4px rgba(0,0,0,0.1)，阴影主体比元素本身宽高各多出 8px（上下左右各 4px），视觉上立刻有“胀出感”。
- 这不是渲染 bug，是预期行为：spread 扩张的是投影面积，不是光晕
- 常见误判点：把这种“硬扩张”当成“发光”或“浮起”，结果层次混乱
- 深色背景 + 高透明度 + 大 spread 组合，会让边缘发灰、边界模糊，加剧溢出错觉
如何用 spread-radius 控制“刚好撑开”的分寸感
关键不是避免 spread，而是让它配合 blur-radius 和 color 一起工作，形成可信的光影逻辑。
- 先设
blur-radius为 0，纯看 spread 的几何变化，确认扩张量是否合理（比如卡片常用2px～4px） - 再加
blur-radius（建议 6px～12px），柔化扩张后的硬边，避免“描边感” - color 用低透明度 rgba（如
rgba(0,0,0,0.06)），防止扩散后颜色堆积过重 - 若需更强立体感，可用双层：外层小 spread + 中等 blur 模拟远距投影，内层负 spread（如
-2px）收紧近端阴影
父容器裁剪导致的“假溢出”怎么识别
真正溢出是阴影撑破布局；假溢出是阴影被 overflow: hidden 或 clip-path 截断，只显示局部，反而显得突兀、不完整。
立即学习“前端免费学习笔记（深入）”；
- 临时验证法：给父容器加
overflow: visible，看阴影是否恢复全貌 - 稳妥解法：对阴影元素加
position: relative; z-index: 1，并在父容器加transform: translateZ(0)创建新层叠上下文，避免裁剪 - 别用
margin: -4px强行“拉出”阴影——内容位移了，阴影依然被裁，只是错位叠加
spread-radius 是最易被低估也最容易滥用的参数：它不参与模糊，不调节透明，只干一件事——改尺寸。调得稍大，就从“悬浮”变成“爆框”；稍小，又失去体积感。真实项目里，2px 和 4px 的差别，往往就是设计还原度的关键分水岭。
