spread-radius 控制阴影轮廓的等比例缩放：正值向外扩展、负值向内收缩，不影响模糊度；它受父容器 overflow 约束易被裁剪，Safari 存在 sub-pixel 渲染差异，inset 下方向反直觉，且与 border-radius 联动可能引发渲染异常。
box-shadow 的 spread-radius 参数怎么控制阴影扩散大小
spread-radius 是 box-shadow 第四个长度参数，正数扩大阴影轮廓，负数收缩——它不改变模糊程度，只等比例缩放阴影的“硬边”投影范围。
常见错误是把它和 blur-radius 混用：比如想让阴影更“蓬松”却调大 spread，结果只是阴影块变厚、边缘反而更生硬。
- spread-radius 为
0时，阴影轮廓与元素 border-box 完全一致 - 设为
4px，阴影向外均匀扩展 4px（上下左右各多出 4px） - 设为
-2px，阴影向内收缩 2px，可能被父容器裁剪或完全消失 - 多层阴影中，每层可独立设置 spread，比如外扩一层 + 内收一层模拟浮雕效果
为什么 box-shadow 扩散后常被父容器截断
因为 spread-radius 扩展的是阴影的绘制区域，但这个区域仍受父元素 overflow: hidden 或 clip-path 约束——阴影不是脱离文档流的伪元素，它本质是盒模型的绘制副作用。
典型场景：卡片放在 overflow: hidden 的轮播容器里，加了 box-shadow: 0 2px 8px 4px rgba(0,0,0,0.1) 后底部阴影被切掉。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：给父容器加
overflow: visible（需确认不影响其他逻辑） - 稳妥做法：提升阴影所在元素的层级，用
position: relative+z-index配合父容器transform: translateZ(0)触发新层叠上下文 - 避免踩坑：不要依赖 margin 负值“拉出”阴影——它不解决裁剪，只让内容错位
spread-radius 在不同浏览器里的渲染差异
绝大多数现代浏览器对 spread-radius 渲染一致，但 Safari（尤其是 iOS 15–16）在高 DPR 屏幕下可能出现 1px 偏移或抗锯齿异常，表现为扩散边缘轻微虚化或错位。
这不是 bug，而是其光栅化策略对 sub-pixel 扩展的处理方式不同。
- 兼容性底线：所有支持
box-shadow的浏览器都支持 spread-radius，包括 IE9+ - 若需像素级精确，避免使用小数 spread（如
0.5px），Safari 可能四舍五入为0或1px - 设计稿标注扩散值时，优先用偶数（
2px、4px），减少跨设备渲染抖动
用 box-shadow 模拟内阴影时 spread-radius 的反直觉行为
inset 关键字会让 box-shadow 绘制在元素内部，但 spread-radius 依然按“向外扩展”逻辑作用——只不过方向是朝内：正 spread 会让内阴影更“紧贴”内容区，负 spread 反而可能让它从 border 内侧“漏”出来。
例如：box-shadow: inset 0 0 8px 2px rgba(0,0,0,0.1) 中的 2px 会让内阴影边界比 border 内边缘再向内缩 2px。
- 要让内阴影覆盖整个 padding 区，spread 值应 ≥ 元素的
border-width - 配合
inset使用负 spread（如-1px）容易导致阴影在 border 处断裂，尤其圆角处 - 真正需要“压暗边缘”的效果，往往用两层
inset更可控：一层大 spread 做基底，一层小 blur 做过渡
border-radius 的联动——spread 会等比例扩展圆角弧度，但 radius 过大+spread 过大时，某些浏览器（特别是旧版 Edge）可能渲染出非预期的尖角或锯齿。这时候与其调参，不如拆成两个元素：内层圆角内容 + 外层带 spread 的伪元素阴影。 
