border-image配合linear-gradient可实现边框渐变，需设border宽度和border-image-slice:1；伪元素方案更适配圆角与动画；transition不支持border-image，需用background-position或伪元素opacity过渡；iOS 15.4前Safari存在渲染bug，应降级处理。
border-image 配合线性渐变实现边框过渡
纯 CSS 没有 border-gradient 这种属性，但可以用 border-image 把渐变“贴”到边框上，这是目前最可靠、兼容性最好的方案（Chrome 16+、Firefox 15+、Safari 6+、Edge 12+ 都支持）。
关键在于：把 linear-gradient() 当作图片源，用 border-image-slice: 1 确保渐变完整铺满边框，而不是被裁切成九宫格中心。
-
border必须显式设置宽度（比如border: 4px solid transparent），否则border-image无处附着 -
border-image-source用渐变时，别漏掉border-image-slice: 1—— 默认是100%，会导致渐变只显示中间一小块 - 如果边框太细（比如
1px），渐变可能糊成一条色带；建议 ≥3px起步，视觉更可控
button {
border: 4px solid transparent;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
}
伪元素 + background-gradient 模拟渐变边框
当 border-image 不适用（比如需要圆角边框过渡、或要配合 box-shadow 叠加），常用伪元素覆盖法：用 ::before 绘制一层和容器等大的渐变背景，再通过 z-index 和 inset 控制只露出边框区域。
本质是“画一个稍大的渐变框，再把它裁成边框形状”，所以对 border-radius 支持更好，也更容易做动画。
- 必须给父元素设
position: relative，否则伪元素无法精确定位 -
inset值要和期望的边框宽度一致（如想模拟3px边框，就写inset: -3px） - 伪元素的
z-index要低于内容层（比如-1），否则文字会被盖住 - 注意在高缩放比（如 Windows 125% DPI）下，像素级偏移可能露白边，可加
transform: translateZ(0)强制硬件加速缓解
.card {
position: relative;
}
.card::before {
content: "";
position: absolute;
inset: -3px;
z-index: -1;
background: linear-gradient(135deg, #8e2de2, #4a00e0);
border-radius: 8px;
}
transition 无法直接作用于 border-image
想让渐变边框随 hover 变色？别试 transition: border-image —— 浏览器根本不认这个可动画属性。所有主流引擎都把它列为「non-animatable」，写了也无效，控制台不会报错，但就是不动。
真正能动的只有两类方案：
- 用
background-position移动渐变位置（需设background-size大于容器，且仅适用于方向变化不大的过渡） - 改用伪元素方案，对伪元素的
opacity或transform做过渡，再配合两层不同渐变切换（更稳妥）
例如：hover 时给 ::before 加 opacity: 0.8 → 1，同时用 transition: opacity 0.3s，比硬切颜色更柔和。
移动端 Safari 的 border-image 渐变 bug
iOS 15.4 之前，Safari 对 border-image 中的 linear-gradient 有渲染异常：渐变会横向拉伸、错位，甚至整个边框消失。这不是代码写错，是 WebKit 的已知 bug（WebKit Bug #237202）。
绕过方式很实际：
- 检测 iOS Safari（用
navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")） - 对这类 UA 回退到伪元素方案
- 或者统一用
border-image: url(data:image/svg+xml,...)写 SVG 渐变（兼容性更好，但维护成本略高）
别指望用户升级系统来解决——很多老设备卡在 iOS 14/15，这个问题得在代码里兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
