box-shadow外扩散失效主因是父容器overflow隐藏、层叠上下文触发或参数误设；需检查overflow/transform/filter影响，用translatez(0)强制分层，伪元素移出阴影，合理组合inset与外扩，并控制扩散距离≤8px。
box-shadow 外扩散距离失效的典型表现
移动端用 box-shadow 想实现外扩阴影（比如按钮按下时阴影变大），结果阴影“被裁掉”或根本看不见——不是代码写错了，是父容器或自身触发了层叠上下文、溢出隐藏，或者没设对扩散半径和偏移量。
常见错误现象：
• 阴影只显示一半，右边/下边被截断
• box-shadow 值明明写了 0 0 12px 4px rgba(0,0,0,0.15)，但看起来像没加
• iOS Safari 中阴影突然消失，安卓正常
- 检查父元素是否设置了
overflow: hidden或overflow: clip—— 这是最常踩的坑，尤其在轮播、卡片列表、Modal 内部 -
box-shadow的第四个参数（扩张距离）为正值才外扩；负值会向内收缩，别写反 - 移动端默认缩放或视口设置可能让像素计算失真，建议用
rem或px明确单位，避免用em或百分比
iOS Safari 下 box-shadow 被吃掉的兼容处理
iOS 15+ 的 WebKit 对层叠上下文更敏感，即使没设 overflow: hidden，只要父元素有 transform、will-change 或 filter，就可能剪裁子元素的 box-shadow。
- 给阴影元素加
transform: translateZ(0)或will-change: transform，强制创建独立层，绕过渲染裁剪逻辑 - 避免在父级上同时使用
border-radius和overflow: hidden—— 这组合在 iOS 上对box-shadow是“双重封印” - 如果必须用圆角容器，把阴影移到伪元素上：
::after绘制阴影，本体只负责内容，两者脱离同一渲染层
用 inset + 外扩组合实现“按压膨胀”动效
纯外扩阴影做交互反馈容易突兀，配合 inset 阴影能模拟真实按压感，但要注意两者的叠加顺序和层级关系。
- 写法示例：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 16px 2px rgba(0,0,0,0.12) -
inset在前，外扩在后，否则外扩会被inset遮住（CSS 阴影绘制是从后往前叠的） - 过渡时只 animates
box-shadow整体值，不要拆成多个属性过渡，否则 Safari 会闪动或跳帧 - 移动端性能敏感，扩散距离别超过
8px，否则重绘开销明显，尤其低端 Android 机
真正麻烦的不是怎么写 box-shadow，而是它在哪一层、被谁裁了、有没有被 GPU 层优化绕过去。调试时打开 Safari 的「Layers」面板或 Chrome 的「Rendering」里的「Layer borders」，一眼就能看出阴影是不是被关进某个孤立层里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
