css border 不支持渐变值，故需用 ::before 伪元素模拟：通过 inset: -2px、z-index: -1、一致 border-radius 和 transform: scale(1.02) 实现严丝合缝的渐变边框。
为什么不能直接用 border: 2px solid linear-gradient()？
因为 CSS 规范里 border 不支持渐变值，写成 border: 2px solid linear-gradient(...) 会被浏览器直接忽略，退回到默认的黑色或透明边框。你看到的“没效果”，不是写错了，而是语法根本不合法。
::before 伪元素实现渐变边框的关键参数
核心是让伪元素比按钮大一圈，用 background: linear-gradient() 填满它，再靠定位和缩放对齐视觉边框：
-
position: absolute+inset: -2px（数值 = 期望边框粗细），比用top/left/bottom/right更简洁且响应式友好 -
z-index: -1确保不遮挡文字或图标 -
border-radius必须显式写出，且和按钮完全一致（比如都是8px），不能靠继承 -
transform: scale(1.02)是微调关键：放大 2% 让伪元素刚好覆盖按钮内容区边缘；scale(1)会露白边，scale(1.05)可能在小屏触发横向滚动
透明背景按钮下容易踩的坑
当按钮 background: transparent 或含图片时，伪元素的渐变会透出，但若按钮本身有 padding，内容区域缩进，而伪元素仍按原始尺寸渲染，“边框”就会看起来偏厚或上下错位：
- 把
padding挪到内部<span></span>或<div> 上，按钮只负责圆角和伪元素定位 <li>改用 <code>inset: -2px而非固定width/height—— 后者在响应式布局下会失准 - 绝对不要在伪元素上设
background-origin: border-box，它和::before不兼容，会被忽略 - 稳妥做法是外层包一层
<div role="button">，并给该容器设 <code>position: relative - 或者直接用
<div> + <code>tabindex="0"+ 手动绑定点击事件，避开button的渲染差异 - 测试时务必在真机 iOS Safari（特别是 15–16 版）上验证圆角衔接和 hover 动效是否连贯 真正难的不是写出第一版效果，而是让
Safari 15.4 之前对 button 元素的支持问题
原生 <button></button> 在 Safari 15.4 之前对 ::before 的定位和层级支持不稳定，尤其配合 transform 时容易错位或消失：
inset、border-radius、scale 三者在各种屏幕尺寸和 Safari 版本下严丝合缝——差 0.5px 就可能露白边，差一个 Safari 补丁就可能失效。
