优先用「双层伪元素 + background-position 动画」方案：::before设渐变背景并横向移动，::after做镂空遮罩，配合position: relative和z-index分层；需按平台差异调整——H5可用text描边，小程序需linear定时函数，App端须transform: translateZ(0)启用GPU加速，支付宝小程序改用border+outline模拟。
uni-app 里怎么用 CSS 实现动态渐变边框
直接用 border-image 或纯 background + mask 在 uni-app 中基本不可靠——小程序端不支持 mask，App 端对 border-image 兼容性差，H5 虽能跑但动画卡顿。真正可行的是「双层伪元素 + background-position 动画」方案。
核心思路：用一个 ::before 伪元素铺满按钮区域，设置线性渐变背景 + 固定尺寸；再用 ::after 做镂空遮罩（background: #fff + inset），露出中间内容；最后通过 background-position 横向移动实现“流动”感。
- 必须设
position: relative到按钮本身，否则伪元素定位失效 - 渐变色推荐用 3–4 色，避免过渡太生硬：
linear-gradient(90deg, #ff6a00, #ff9e00, #ffc107, #ff6a00) - 动画时长建议 ≤ 3s，否则在低端安卓机上掉帧明显
- 真机调试时发现 iOS 微信小程序对
background-position动画支持不稳定，可降级为transform: translateX()配合clip-path
如何让涟漪效果和动态边框共存不打架
uView 的 ripple 效果本质是点击时插入一个绝对定位的 <view> 并 scale 缩放，而动态边框依赖伪元素层级。两者叠加时，涟漪层容易盖住边框动画，或被边框遮挡。
解决办法不是禁用 ripple，而是调整 z-index 层级顺序：
- 给按钮设
position: relative和z-index: 1 -
::before（边框层）设z-index: -1 - 涟漪元素（u-button 内部生成的）默认 z-index 是 2，无需改
- 如果用了自定义涟漪（比如手写
@click触发的view），务必确保它的z-index≥ 3
另外注意：H5 端 ripple 默认用 transition，而边框动画用 @keyframes，两者同时触发可能触发浏览器重排。建议统一用 will-change: transform 提前声明优化。
不同平台下动态边框的兼容写法差异
uni-app 三端渲染机制不同，同一段 CSS 在小程序、App、H5 表现可能完全不一样：
- H5 端：支持
background-clip: text+-webkit-text-fill-color: transparent做文字描边动画，但 App 和小程序不认 - 微信小程序：伪元素动画需加
animation-timing-function: linear显式声明，否则默认 ease 会导致首尾卡顿 - App 端（尤其是 iOS）：
background-position动画必须配合transform: translateZ(0)强制 GPU 加速，否则静止不动 - 支付宝小程序：不支持
inset值用于clip-path，得换用border+outline模拟镂空效果
最稳妥的跨端写法是：用 border + box-shadow 模拟单色动态边框（比如用 box-shadow: 0 0 0 2px #ff6a00 配合 animation 改变颜色），放弃多色流动，换稳定性。
按钮 disabled 状态下动态边框怎么自动停掉
很多人写了动画，却忘了 :disabled 时动画还在跑——既耗性能，又误导用户。uni-app 的原生 <button> 和 uView 的 <u-button> 都支持 disabled 属性，但不会自动停掉你写的 CSS 动画。
- 必须显式加规则：
button:disabled::before { animation-play-state: paused; } - 如果用的是 Vue 响应式控制（比如
:disabled="isLoading"），记得同步控制 class：:class="{ 'no-border-anim': isLoading }"，再在 CSS 里写.no-border-anim::before { animation: none; } - App 端有个隐藏坑：
disabled后按钮仍会响应touchstart，所以光停动画不够，还得加pointer-events: none防误触
真正麻烦的不是写法，而是测试——每个平台都要单独验证 disabled 时动画是否真的停了、按钮是否不可点、视觉反馈是否一致。别跳过真机测。
