虚线边框动画需用伪元素+repeating-linear-gradient模拟，通过background-position位移实现流动效果；须设background-clip: padding-box防圆角溢出，关掉-webkit-tap-highlight-color并补:active反馈，且需按背景色调试渐变参数。
虚线边框动画用 @keyframes 控制点阵激活节奏
所谓“虚线框流动”，本质是让虚线边框的每个点按顺序亮起、熄灭，模拟电流或扫描效果。不能靠 border-style: dashed 直接动起来——浏览器不支持对 border 的 dash pattern 做逐点动画。必须用伪元素 + background 模拟虚线，并通过 background-position 位移制造“流动”感。
- 先设按钮
position: relative，再用::after伪元素覆盖整个边框区域 - 伪元素背景用重复线性渐变：
background: repeating-linear-gradient(90deg, #3498db, #3498db 2px, transparent 2px, transparent 6px) - 关键：给
background-size设为12px 12px（控制虚线密度），再用@keyframes动background-position横向偏移 - 动画时长建议 1.2s～1.8s，
animation-timing-function: linear，避免缓动导致节奏断裂
background-clip: padding-box 防止虚线溢出圆角
加了 border-radius 后，伪元素的背景虚线常会从圆角处“漏出来”，尤其在 Firefox 和旧版 Safari 中明显。这不是 bug，而是默认 background-clip 作用于 border box，而虚线背景画在 padding 区域外。
- 必须显式写
background-clip: padding-box，确保虚线只渲染在内边距以内 - 同时设
padding足够容纳虚线宽度（比如虚线段长 2px + 间隙 4px = 6px，padding至少 8px） - 若按钮用了
box-sizing: border-box，注意width和height已含 padding，别额外缩容
鼠标悬停时暂停流动？用 animation-play-state 切换
很多设计稿要求“悬停即停”，但直接写 button:hover .btn::after { animation-play-state: paused } 会因层叠优先级失效——伪元素动画通常定义在全局 @keyframes，hover 规则需更具体。
- 推荐写法：
button::after { animation: flow 1.5s linear infinite; }，然后button:hover::after { animation-play-state: paused; } - 注意：Chrome 115+ 支持该属性，但 iOS Safari 16.4 之前版本不支持
paused，可加降级：button:hover::after { background-position-x: 0; }强制定格 - 若需恢复流动，不要依赖
animation: none—— 它会重置整个动画状态，应改用running
移动端点击黑框干扰虚线效果？-webkit-tap-highlight-color 必须关
iOS Safari 点击按钮时的灰色半透明高亮 overlay 会盖住虚线动画，且和 :focus 无关，outline 设置完全无效。
- 必须单独处理：
button { -webkit-tap-highlight-color: transparent; } - 设为
transparent最稳妥；rgba(0,0,0,0)在 iOS 15.6 及更早版本可能仍显示微弱灰影 - 关闭 tap highlight 后，用户失去点击反馈，务必补
:active样式：button:active { opacity: 0.85; }或轻微transform: scale(0.98)
repeating-linear-gradient 参数，在深色背景上显得稀疏，在浅色背景上又容易糊成实线。得按实际背景色重新算 background-size 和渐变 stop 位置，没法一劳永逸套用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
