最稳妥方案是用::before伪元素模拟渐变边框，需设position: relative、inset: 0、content: ""、border-radius: inherit及clip-path: inset(2px round 12px)，并加pointer-events: none防点击拦截。
直接用 ::before 模拟渐变边框是当前最稳妥、兼容性最好、且能精准控制圆角的方案；别碰 border-image 或试图给 border-color 加渐变，它们要么失效，要么在 Safari 里切角、抖动、不响应 hover。
为什么必须设 position: relative 和 inset: 0
伪元素要严丝合缝贴住容器边缘，inset: 0 比写 top: 0; left: 0; right: 0; bottom: 0 更健壮，尤其在 flex/grid 容器中不会意外偏移。父元素不加 position: relative，::before 就会向上层定位上下文脱标——常见现象是流光跑出按钮范围，或者 hover 时整个动画错位到页面左上角。
-
::before必须有content: ""，否则不渲染 - 若按钮本身有
border-radius: 12px，伪元素需加border-radius: inherit，不能只靠overflow: hidden裁切 - 避免用
margin: -2px往外拉伪元素——不同缩放比下容易漏光；改用padding: 2px控制边框厚度更稳定
clip-path 裁边比 mask 更靠谱
mask 在部分安卓 WebView 和 iOS 16.5 以下 Safari 中存在闪烁或完全不生效的问题；clip-path: inset(2px round 12px) 则能精准抠出“内缩 2px、圆角 12px”的矩形环，只让伪元素在边框区域显示，且性能开销更低。
-
round值必须和父元素的border-radius完全一致（单位用px，不用%或em） - 别用
polygon()手动描点——坐标差 0.5px 就会导致转角处断连或重叠 - 如果按钮是椭圆（
border-radius: 50%），clip-path不支持椭圆 inset，此时应改用conic-gradient+rotate动画
hover 动效该动什么？别动 transform
想让渐变边框在 hover 时换色或流动，直接改 background 并配 transition: background 0.3s 最稳。用 transform: translateX 或 rotate 移动伪元素本身，容易触发重绘抖动，尤其在低端安卓机上明显卡顿。
- 线性渐变流动效果：用
background-size: 200% 200%+background-position: -100% 0初始偏移，再动画background-position - 环形流光：用
conic-gradient+animation: rotate 3s linear infinite，比四段linear-gradient关键帧更平滑 - 务必加
pointer-events: none，否则伪元素会拦截点击事件，按钮点不动
真正容易被忽略的是圆角对齐精度和 Safari 的图层合成问题：哪怕 border-radius 和 clip-path 差 0.1px，转角处就会跳变；iOS 上快速 hover 可能导致伪元素瞬时消失，这时得加 transform: translateZ(0) 强制 GPU 图层——但只对高频交互按钮启用，别全局滥用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
