唯一稳定方案是用 ::before 伪元素模拟边框，需设 position: relative 和 inset: 0 确保定位准确，content: "" 不可省略，clip-path: inset() 比 mask 更兼容，round 值须与父元素 border-radius 完全一致且单位为 px。
直接用 border-color 写渐变无效，浏览器会静默忽略；唯一稳定可行的方案是用 ::before 伪元素模拟边框层，配合 inset、padding 和 clip-path 精准控形。
为什么必须设 position: relative 和 inset: 0
伪元素默认脱离文档流，不加 position: relative 的父容器，它就会向上找最近的定位上下文——常见结果是边框飘到页面左上角，或 hover 时整个动画错位。而 inset: 0 比写 top: 0; left: 0; right: 0; bottom: 0 更可靠：在 flex/grid 容器里不会因对齐方式变化意外偏移，且更简洁。
-
::before必须有content: ""，否则根本不渲染 - 父元素漏掉
position: relative→ 伪元素脱标定位 → 边框跑出范围 - 用
inset: -2px向外撑出做“粗边框”时，要同步加overflow: hidden防溢出毛刺
clip-path: inset() 比 mask 更稳
在 iOS 16.5 以下 Safari 或部分安卓 WebView 中，mask 会闪烁甚至完全不生效；clip-path: inset(2px round 12px) 则能精准抠出“内缩 2px、圆角 12px”的环形区域，只让渐变显示在边框位置，性能也更好。
-
round值必须和父元素的border-radius完全一致，单位只能用px（不用%或em） - 差 0.1px 就可能导致转角处跳变或断连
- 如果父元素是椭圆（
border-radius: 50%），clip-path: inset()不支持椭圆裁切，此时应改用conic-gradient+rotate动画
hover 动效该动什么、不该动什么
想让渐变边框在 hover 时换色或流动，直接改 background 并配 transition: background 0.3s 最稳。别碰 transform 移动伪元素本身——尤其在低端安卓机上，translateX 或 rotate 容易触发重绘抖动，视觉卡顿明显。
- 线性渐变流动：用
background-position: -100% 0初始偏移，再动画background-position - 圆角按钮高频交互时，若快速 hover 导致伪元素瞬时消失，可加
transform: translateZ(0)强制 GPU 图层，但仅限该按钮启用，别全局滥用 - 别用
margin: -2px往外拉伪元素——不同缩放比下容易漏光；改用padding: 2px控制厚度更稳定
真正难的不是写出来，而是圆角值、clip-path 的 round、padding 数值三者之间差 0.1px 就会破功；iOS 上快速悬停还可能触发 WebKit 的图层合成 bug——这些细节不实测根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
