inset关键字必须位于模糊半径之后、颜色之前，如box-shadow: 0 0 8px inset #000；位置错误（如插在中间）将导致整个声明失效。
box-shadow 的 inset 关键字必须紧贴在颜色值之前
直接写 box-shadow: 0 2px 4px inset #000 是无效的——浏览器会忽略整个声明。inset 不是可选参数，而是 box-shadow 函数的**位置敏感关键字**，必须出现在偏移量和模糊半径之后、颜色之前。
正确顺序是：box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] inset [color]。其中 spread-radius 可省略，但一旦写了，inset 就必须紧接其后。
-
box-shadow: 0 0 8px inset #000✅ 有效：无扩展半径，inset 紧跟模糊值 -
box-shadow: 0 0 8px 2px inset #000✅ 有效：扩展 2px 后立即跟 inset -
box-shadow: 0 0 inset 8px #000❌ 无效：inset 插在中间，解析失败
伪元素实现内阴影时，z-index 和定位缺一不可
单纯用 ::before 或 ::after 绘制一个遮罩层，不控制堆叠和位置，阴影会被内容盖住或溢出容器边界。关键不是“能不能画”，而是“能不能刚好卡在内容背后、父盒内部”。
- 伪元素必须设
position: absolute，且父容器需有position: relative（否则绝对定位基准错乱） - 伪元素需覆盖整个父盒：
top: 0; right: 0; bottom: 0; left: 0 - 必须用
z-index: -1把它压到内容下方；若父容器已有 z-index，还需确保该值足够小 - 别忘了
content: ""，否则伪元素不渲染
典型写法：
.inner-shadow {
position: relative;
}
.inner-shadow::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
box-shadow: inset 0 0 12px rgba(0,0,0,0.2);
z-index: -1;
}
inset 阴影在圆角容器中会自动贴合 border-radius
这是 box-shadow 的隐式行为：只要父元素设置了 border-radius，inset 阴影会严格按内边框轮廓裁切，无需额外处理。但注意两个边界情况：
立即学习“前端免费学习笔记（深入）”；
- 如果伪元素自身也设了
border-radius，可能造成双层圆角叠加，视觉失真 - 当容器使用
overflow: hidden时，inset 阴影仍可见——它本就属于盒内渲染，不受溢出裁剪影响 - 若想让内阴影“更向内”，可加负的
spread-radius，例如inset 0 0 10px -2px #000，但过大会导致阴影收缩到看不见
移动端 Safari 对 inset 阴影的渲染有轻微模糊延迟
部分 iOS 版本（尤其是 iOS 15–16）在快速滚动或动态添加 class 时，box-shadow: inset 可能短暂显示为外阴影或完全不出现，几帧后才修正。这不是 bug，而是 WebKit 渲染管线对 inset 类型的优化策略不同。
临时缓解方式只有两个：
- 强制触发重绘：给元素加
transform: translateZ(0)或will-change: box-shadow - 避免在 scroll 事件中高频切换 inset 阴影 class，改用 CSS transition + opacity 控制显隐
真正稳定的方式仍是用伪元素方案——它把阴影转为独立图层，绕开了 WebKit 对 inset 的即时计算依赖。
