纯css呼吸光晕需至少两层box-shadow：外层正spread-radius撑基底，内层inset强化中心亮度，配合blur-radius与opacity动画变化，禁用spread-radius动画，用animation-play-state控制启停，兼顾兼容性与性能。
box-shadow 多层叠加实现呼吸光晕的关键逻辑
纯 CSS 实现“呼吸发光”效果，本质是用 box-shadow 的多层投影 + animation 控制模糊半径和透明度变化。不能只靠一层阴影——单层 box-shadow 动起来会生硬、边缘断裂；必须至少两层：内层控制亮度/色相，外层负责扩散感，再配合 opacity 或 rgba() 通道渐变才能模拟真实呼吸节奏。
动画参数必须用 inset 和 spread-radius 配合调制
常见错误是只改 blur-radius，结果光晕忽大忽小但不“呼吸”。正确做法是：
- 外层阴影用正
spread-radius（如0 0 20px 8px rgba(100, 150, 255, 0.4)）撑开光晕基底，避免模糊拉丝 - 内层加
inset阴影（如inset 0 0 12px 2px rgba(100, 150, 255, 0.6)）强化中心亮度，让光有“从里往外推”的质感 - 动画中同时变化
blur-radius和opacity值，但不要动spread-radius——它该保持静态，否则光晕会抖动
性能陷阱：避免在 :hover 里直接写多层 box-shadow 动画
用户常把呼吸效果绑在 :hover 上，一悬停就触发多层阴影重绘，滚动卡顿明显。更稳的做法是：
- 默认状态设为
box-shadow: none，但保留animation: glow 3s ease-in-out infinite - 用
@keyframes glow定义完整周期，其中0%, 100%设为低透明度小模糊，50%设为高透明度大模糊 - 若需悬停触发，改用
animation-play-state: paused / running切换，而非重写整个box-shadow值
示例关键帧：
@keyframes glow {<br> 0%, 100% { box-shadow: 0 0 10px 2px rgba(100, 150, 255, 0.2), inset 0 0 6px 1px rgba(100, 150, 255, 0.3); }<br> 50% { box-shadow: 0 0 32px 10px rgba(100, 155, 255, 0.7), inset 0 0 20px 4px rgba(100, 155, 255, 0.9); }<br>}
兼容性与色彩控制：别硬套 hsl() 动态变色
想让光晕随呼吸变色（比如蓝→紫→蓝），直接在 @keyframes 里写 hsl(220, 80%, 60%) → hsl(280, 80%, 60%) 看似合理，但 Safari 旧版和部分安卓 WebView 会丢帧或颜色跳变。稳妥方案是：
- 固定用
rgba()，通过 JS 或预编译工具生成过渡色值表，CSS 只做数值插值 - 若必须动态色，改用两层阴影：底层用静态主色，顶层用带透明度的白色/浅色
inset阴影叠加出冷暖倾向 - 所有
box-shadow值末尾加!important防止被框架样式覆盖（尤其在 React/Vue 组件中）
真正难的不是写几行 box-shadow，而是让多层阴影在不同设备上同步呼吸节奏——iOS 上 ease-in-out 实际更陡，得微调关键帧时间点；而低端安卓机对 >3 层阴影的渲染延迟可能达 100ms，这时宁可砍掉一层，保节奏不崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
