无法用border-color实现边框颜色流动动画，必须用background-image+background-position配合伪元素模拟：设border为transparent，伪元素absolute定位并同步border-radius，background-size至少400%且background-position用百分比位移。
直接用 border-color 动画行不通
浏览器不支持对 border-color 做多色渐变过渡，更无法让颜色“沿着边框滑动”。你写 transition: border-color 0.3s 或 @keyframes 改 border-color，只会硬切两色，毫无流动感；写 border: 2px solid linear-gradient(...) 是无效语法，会被静默忽略，回退成透明或默认黑边。
必须用 background-image + background-position 模拟
真正能动的是背景图，不是边框本身。核心是把渐变画在伪元素或按钮自身背景上，再靠位移制造“流动”错觉：
-
border必须设为2px solid transparent，否则盖住背景动画 - 用
::before伪元素（推荐）或直接在按钮上设background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1) -
background-size至少300% 300%，推荐400% 400%，不然位移一过就露底色 -
background-position必须写百分比，比如0% 50%→100% 50%，别用right或center - 水平流动配
linear-gradient(90deg, ...)，垂直流动用0deg
伪元素定位和圆角兼容要小心
伪元素容易因定位或裁剪出错，尤其按钮带 border-radius 时：
- 按钮加
position: relative，伪元素用position: absolute+inset: -2px（假设边框宽 2px） - 伪元素
z-index: -1，避免遮挡文字或点击区域 - 如果按钮有圆角，伪元素也得同步设相同
border-radius，否则边缘漏光或裁切 - 加
overflow: hidden到按钮上，兜底防止位移时边缘穿出 - 移动端快速进出
:hover容易卡中间态，改用@keyframes+animation-play-state: paused更稳
移动端点击没反馈？先查 touch-action
iOS Safari 和部分安卓 WebView 默认压制按钮点击反馈，哪怕 CSS 写对了，用户也会觉得“点不动”：
立即学习“前端免费学习笔记（深入）”；
- 按钮必须加
touch-action: manipulation，否则:active态不触发 - 伪元素上也要加
-webkit-tap-highlight-color: transparent，防点击闪白 - 别依赖纯
:hover做交互主逻辑，移动端没有稳定 hover 状态 - 动画别堆太多属性，
will-change: background-position慎用，可能引发重绘开销
background-size、background-position、渐变角度、伪元素尺寸、圆角值，任意一个不匹配，动画就断层或卡死。 
