真正能落地的渐变边框方案只有border-image和伪元素叠加两种，选哪个取决于是否需要圆角、动画或兼容老浏览器。
直接用 border-color: linear-gradient() 会失效——浏览器只认纯色，写上去等于没写。真正能落地的方案就两个：border-image 和伪元素叠加，选哪个取决于你是否需要圆角、动画或兼容老浏览器。
border-image 实现渐变边框的硬性条件
这不是“加个渐变就行”的事，四个属性必须同时存在，漏一个就显示为透明或纯色边框：
-
border必须显式设宽度和样式，例如border: 4px solid transparent；不写transparent会导致渐变被盖住 -
border-image-source用linear-gradient()，方向建议to right或to bottom；斜向（如45deg）容易让四条边颜色错位 -
border-image-slice必须是1（无单位），不是100%也不是0；100%在 Safari 旧版里会裁掉渐变边缘 -
border-image-repeat推荐stretch；round在小尺寸容器上可能拉伸失真，出现色块断裂
示例：
div {
border: 3px solid transparent;
border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;
border-image-repeat: stretch;
}
伪元素方案更适合圆角和 hover 动画
border-image 和 border-radius 天然冲突：圆角处常出现硬边、色块偏移甚至空白。这时伪元素才是更可控的选择：
- 父元素必须设
position: relative，否则::before无法精确定位 -
::before的inset值要等于目标边框宽度（比如想模拟3px边框，就写inset: -3px） -
z-index: -1是必须的，否则会遮挡文字或交互元素 - 如果在高 DPI 屏幕（如 Windows 125% 缩放）下看到白边，加
transform: translateZ(0)强制硬件加速可缓解
示例：
.card {
position: relative;
border-radius: 8px;
}
.card::before {
content: "";
position: absolute;
inset: -3px;
z-index: -1;
background: linear-gradient(135deg, #8e2de2, #4a00e0);
border-radius: 8px;
}
transition 不能直接作用于 border-image
别试 transition: border-image——所有主流浏览器都把它标记为「non-animatable」，写了也不动，控制台还不报错，纯属静默失败。
- 想实现 hover 渐变变化？只能过渡伪元素的
background或opacity - 用
background-position滚动渐变也是一种替代思路，但需配合background-size手动调参 - iOS 15.4 之前的 Safari 有
border-image渲染 bug，圆角+渐变组合下可能直接不显示；这种场景必须降级为伪元素方案
真正难的不是写出代码，而是判断什么时候该放弃 border-image：只要设计稿里出现圆角、hover 动效、或需要支持微信 X5 内核（旧版 iOS 微信），伪元素就是唯一稳妥选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
