必须将整条渐变声明存为CSS变量（如--border-grad: linear-gradient(to right, #ff6b6b, #4ecdc4)），再通过border-image: var(--border-grad) 1调用，并配border-image-slice: 1 fill、显式border: width solid transparent，且避免border-radius；圆角场景应改用伪元素模拟渐变边框。
border-image + CSS变量必须整条渐变声明为一个变量
你不能把 linear-gradient() 的方向或颜色拆成多个变量再拼进函数里，比如 linear-gradient(var(--dir), var(--c1), var(--c2)) 在 Chrome/Firefox 中会直接失效——浏览器不支持在函数参数位置解析 var()。真正能用的方案是把整条渐变声明存进一个变量：--border-grad: linear-gradient(to right, #ff6b6b, #4ecdc4)，然后在 border-image 中引用：border-image: var(--border-grad) 1。
这个写法绕过了语法限制，也符合当前所有支持渐变边框的浏览器（Chrome 110+、Firefox 115+）的解析逻辑。Safari 仍不支持，这点必须提前检测。
漏掉 border-image-slice: 1 就等于没写渐变
这是最常被跳过的一步。默认 border-image-slice 是 100%，它会把渐变图切成九宫格，只保留四角，中间和四边全被裁掉——结果就是边框看起来是纯色，甚至完全透明。
-
border-image-slice: 1表示“1px 切片”，强制启用九宫格且让上下左右的边区有可拉伸的实际尺寸 - 加
fill（即border-image-slice: 1 fill）才能让渐变铺满整个边框区域，否则中间空白 - 别用百分比或
auto，在高 DPR 设备或缩放页面下行为不稳定
必须配 border: <width> solid transparent
border-image 不是独立属性，它只是“贴图”机制，没有载体就无处渲染。如果只写 border-image 而没设 border-width 和样式，边框根本不会出现。
立即学习“前端免费学习笔记（深入）”；
-
border必须显式声明宽度（如4px）和solid样式；transparent是为了不让 fallback 的border-color干扰渐变 - 不能用
dashed或dotted——border-image对虚线边框的支持极差，容易断层或错位 - 单位必须明确，
border-width: var(--border-w)可以，但var(--border-w) * 1.2这类计算在border-image-width中不生效
圆角 + 渐变边框 = 高概率断裂，别硬扛
哪怕你把所有配置都写对了，只要加了 border-radius，Chrome 和 Firefox 下的 border-image 渐变大概率在拐角处撕裂、偏色或消失。这不是 bug，是规范限制：border-image 基于矩形盒模型绘制，不重映射纹理到圆角路径。
真实项目中更稳妥的做法是放弃 border-image，改用伪元素模拟：
- 主元素设
position: relative和border-radius -
::before绝对定位，inset: -4px撑出边框空间，同样设border-radius - 渐变写在伪元素上：
background: linear-gradient(to right, #ff6b6b, #4ecdc4) - Retina 屏补救：
transform: translateZ(0)防止发虚
这套方案不依赖 border-image 特性，兼容性好，圆角表现稳定，只是多一层 DOM 渲染——但比起 Safari 上完全不显示，这点代价很值得。
