边框中心扩散必须用::before伪元素配合transform:scale()实现；流光边框需用border-image+渐变位移动画；呼吸边框推荐box-shadow+rgba动画；动态模态框高亮应优先用box-shadow类控制。
button:hover 边框中心扩散必须用 ::before 伪元素
直接改 border-width 或 border-color 无法做出“从无到有”的炸开效果，浏览器会重绘整个盒模型，导致视觉跳变或抖动。唯一稳定方案是用伪元素画一个初始缩放为 0 的矩形，再通过 transform: scale() 动画撑开它。
关键实操点：
-
button必须设position: relative，否则::before无法精确定位 -
::before必须写content: ""，否则不渲染 - 宽高建议设为
100%，transform-origin: center保证从中心扩散 - 加
overflow: hidden防止缩放时伪元素溢出按钮边界 - 动画时间控制在
0.3s～0.4s，用ease缓动，别用linear
border-image + animation 实现流光边框
想让边框“流动”起来，不能靠 border-color 动画——CSS 不支持渐变色的 border-color 过渡，会卡顿或失效。必须用 border-image 配合线性渐变和位移动画。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 没显式设置
border-width，border-image就不生效 - 漏写
border-image-slice: 1，渐变会被裁切掉 - 动画方向（
to right）和渐变方向不一致，流光会“卡住” - 动画时长低于
2.5s显得闪烁，超过4s失去动感
示例核心片段：
button {
border: 4px solid;
border-image: linear-gradient(90deg, #6a11cb, #2575fc, #00c9ff) 1;
border-image-slice: 1;
animation: borderShine 3s linear infinite;
}
@keyframes borderShine {
0% { border-image-source: linear-gradient(90deg, #6a11cb, #2575fc, #00c9ff); }
100% { border-image-source: linear-gradient(90deg, #2575fc, #00c9ff, #6a11cb); }
}
box-shadow 模拟呼吸边框最简可靠
不需要伪元素、不依赖 border-image 兼容性，用 box-shadow + @keyframes 就能实现柔和的呼吸节奏。原理是周期性改变模糊半径和透明度，比直接操作 border 更平滑，且 Safari/Chrome/Firefox 全平台支持。
注意细节：
- 先清空原始边框：
border: none，避免和阴影叠加干扰 - 颜色必须用
rgba()，HEX8（如#64b4ff80）在部分 Safari 版本不支持 alpha 通道动画 - 动画用
ease-in-out，时长选3s左右，太短像闪，太长像卡顿 - 移动端点击无
:hover？得用 JS 切换类名触发动画，不能只靠 CSS
动态模态框中按钮高亮优先用 box-shadow
Bootstrap 类框架默认用 box-shadow 做焦点环，所以模态框加载时根据状态自动高亮按钮，也该沿用这套逻辑。改 border 会引发重排，改 outline 又难对齐 UI 风格。
典型做法：
- 定义一个
.btn-status-active类，里面只写box-shadow（比如0 0 0 3px rgba(59, 130, 246, 0.3)） - JS 在模态框
shown.bs.modal事件里判断后端返回的状态，给对应按钮加这个类 - 避免同时操作
border和box-shadow，否则圆角、尺寸易错位 - 如果按钮本身有
border-radius，box-shadow会自然跟随，不用额外处理
真正容易被忽略的是：动画触发时机。很多开发者在模态框 show 阶段就加类，但此时 DOM 可能还没完全挂载，推荐等 shown.bs.modal 或 DOMContentLoaded 后再执行判断和添加。
