box-shadow 是唯一靠谱的选择，因其支持透明度与模糊半径平滑插值，避免 safari 旧版和安卓 webview 中 border-color 动画的卡顿与闪烁，且不触发重排、兼容性好。
纯 CSS 就能实现呼吸边框，关键不是用 border，而是用 box-shadow 模拟发光轮廓——它支持透明度与模糊半径的平滑插值，而 border-color 的 alpha 动画在 Safari 旧版、部分安卓 WebView 中会跳变或卡顿。
为什么 box-shadow 是唯一靠谱的选择
直接给元素加 border 并尝试动画 border-color: rgba() 看似简单，但实际踩坑率极高：
-
border-color的透明度动画在 iOS 15 以下 Safari 中不触发硬件加速，帧率掉到 20fps 以下，肉眼可见卡顿 - 某些安卓系统 WebView（如 Samsung Internet v14）对
border宽度 + 颜色同时变化渲染异常，出现“闪烁撕裂” -
box-shadow天然支持多层、模糊、透明度三者联动，且所有现代浏览器对其插值算法一致 - 它不参与文档流，不会意外撑开父容器或触发重排，性能更稳
标准写法：用 rgba() + ease-in-out 控制呼吸节奏
呼吸感来自“缓入缓出”的明暗过渡，不是线性明灭。必须避开 linear，否则像电源灯；也不能只调 opacity，否则边框虚浮无体积感。
- 起始帧（0%）：
box-shadow: 0 0 0 0 rgba(100, 180, 255, 0.7)—— 无扩散、有基础光晕 - 峰值帧（70%）：
box-shadow: 0 0 0 12px rgba(100, 180, 255, 0.2)—— 最大扩散、透明度压低，模拟光晕膨胀 - 收尾帧（100%）：
box-shadow: 0 0 0 0 rgba(100, 180, 255, 0)—— 光晕完全收回，但保留“余韵”而非彻底消失 - 绑定动画时必须写
animation: breathe-border 3s ease-in-out infinite，ease-in-out写在 animation 属性里，不能塞进@keyframes - 颜色务必用
rgba()，别用#64b4ff80（HEX8），Safari 15.4 之前不认
兼容性 fallback：outline + opacity 不是退步，而是保底策略
当目标环境明确包含老旧 WebView（比如企业内网 Android 8 设备），降级方案比硬扛更可靠：
- 禁用
box-shadow，改用outline: 2px solid #64b4ff—— outline 不占布局、无重排风险 - 动画对象换成元素自身
opacity（不是outline-color，CSS 不允许 animating 它） - 写成
@keyframes fade-outline { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.3; } }，幅度控制在 0.3–0.9 之间，避免内容完全不可读 - 慎用
filter: opacity()，它强制 GPU 加速，在低端机上反而耗电翻倍、发热明显
交互中断时别用 animation-play-state: paused
用户 hover 时想暂停呼吸？直接设 animation-play-state: paused 是错的——恢复时会从当前帧继续，导致节奏错乱、多个元素不同步。
- 正解是定义两套动画：
breathe-idle（默认）和breathe-hover（常亮或快闪） - 在
:hover里切换animation-name，并加animation-duration: 0.1s让切换瞬时生效 - 移出后若需重置周期，必须用 JS 触发
element.style.animation = 'none'; setTimeout(() => element.style.animation = '', 0)强制重绘 - 多元素同步呼吸？统一用
animation-delay错开相位，别依赖 JS 时间戳，后者在页面后台标签页中会被节流
真正难的不是写出来，而是让呼吸边框在 OLED 屏幕上不溢出、在低端安卓机上不掉帧、在用户悬停时不失控——这些细节藏在 rgba() 的取值、ease-in-out 的位置、以及是否敢舍弃 border 这三个地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
