inset box-shadow 的“外扩”错觉是通过多层 inset 阴影叠加、配合 blur 与 spread 数值变化（如负 spread 收缩边缘、正 spread 向内撑开）在视觉上模拟中心“鼓起又回缩”的立体脉动感，并非真实外扩。
什么是 inset box-shadow 的“外扩”错觉
纯 CSS 里 box-shadow 的 inset 关键字只控制阴影是否向内投射，它本身不支持“让内阴影看起来向外膨胀”。所谓“内阴影外扩的呼吸灯”，其实是利用多层 inset 阴影叠加 + blur 和 spread 的数值组合，在视觉上制造出阴影从中心缓慢“鼓起又回缩”的立体脉动感。关键不是真外扩，而是用模糊半径和负扩展值欺骗眼睛。
-
inset阴影的spread值为负时，会收缩阴影边缘；为正时，会向内“撑开”阴影区域（注意：仍是内阴影，只是填充范围变大） -
blur越大，边缘越软，呼吸过渡越平滑；太小则像硬边闪烁，失去呼吸感 - 单层
inset很难模拟鼓胀感，通常需 2–3 层：一层基础暗色（模拟凹陷），一层高亮浅色（模拟隆起高光）
呼吸动画的关键参数配置与 @keyframes 写法
呼吸效果本质是阴影尺寸的周期性变化，但 box-shadow 的 spread 和 blur 都支持 CSS 动画，直接插值即可。重点在于起止状态的设计要符合“内凹→微凸→回凹”的节奏。
@keyframes breathe-inset {
0%, 100% {
box-shadow:
inset 0 0 12px 2px rgba(0,0,0,0.15),
inset 0 0 24px 6px rgba(255,255,255,0.4);
}
50% {
box-shadow:
inset 0 0 20px 8px rgba(0,0,0,0.25),
inset 0 0 36px 12px rgba(255,255,255,0.7);
}
}
- 两层
inset阴影必须同时动画，否则会脱节；不能只动其中一层的blur或只动spread - 深色层（如
rgba(0,0,0,0.25)）的blur和spread在 50% 时增大，强化“压入感”；浅色层同步增大，模拟高光扩散 - 动画时长建议 2.4s–3.2s，太快像频闪，太慢失去呼吸节奏
为什么 transition 直接写在元素上会失效
很多初学者给元素加 transition: box-shadow 0.4s ease，再用 JS 切换 class，结果动画卡顿或根本不触发——这是因为 box-shadow 是**复合属性**，浏览器无法对多层阴影做逐帧插值，除非所有层的结构（颜色、偏移、模糊、扩展）数量和顺序完全一致。
- 必须确保起始态和结束态的
box-shadow声明中，inset层数、每层的参数个数、甚至空格位置都严格对应 - 推荐用
@keyframes+animation，而非transition；后者只适合单层简单阴影变化 - 若必须用
transition，可改用自定义属性（--shadow-blur）配合box-shadow: inset 0 0 var(--shadow-blur) ...，但兼容性需考虑（IE 不支持）
移动端性能与 Safari 兼容性避坑点
在 iOS Safari 上，多层高 blur 的 inset box-shadow 动画容易掉帧，尤其配合 transform 或其他动画时。这不是 bug，是 WebKit 对内阴影渲染路径的限制。
立即学习“前端免费学习笔记（深入）”；
- 避免
blur > 40px，iOS 上超过这个值可能被强制降级为位图缓存，导致内存飙升 - 不要在
:hover或:active中突然启用多层呼吸动画，Safari 可能跳过首帧；建议用animation-play-state: paused/running预加载 - 若需全局呼吸控件（如按钮），优先用伪元素
::before承载阴影动画，主元素保持轻量，减少重绘区域
真正难的不是写出呼吸效果，而是让多层 inset 阴影在不同设备上既保持视觉一致性，又不拖慢主线程。参数调得再准，没压测过真机就等于没做完。
