能。border-image 支持 linear-gradient()，因 CSS 渐变属 <image> 类型；但需设置 border-width > 0、border-style 非 none，并显式指定 border-image-slice 为 1（非默认 100%），否则渐变不显示。
border-image 能不能直接做边框颜色渐变？
不能。border-image 本身不接受 linear-gradient() 作为“颜色”，但可以接受渐变图像——而 CSS 渐变（如 linear-gradient(red, blue)）在规范中属于 <image> 类型，因此**可以**用，只是需要绕开一个常见误解：很多人以为必须配 border-image-slice 才能生效，其实默认值 100% 会让渐变被裁成空。
为什么写了 linear-gradient 却没显示边框？
最常见原因是没设 border-width 或 border-style。CSS 规定：border-image 只在有显式边框样式（如 solid）和宽度时才启用；否则它被忽略，退回到普通 border-color。
-
border-width必须大于0（比如4px） -
border-style必须是非none值（比如solid） -
border-image-source（即border-image的第一部分）需是有效<image> -
border-image-slice推荐显式设为1（或fill 1），避免默认100%导致渐变不可见
正确写法：border-image + linear-gradient 示例
下面这段代码能让一个 div 拥有从左到右的红蓝边框渐变：
.grad-border {
border: 4px solid transparent;
border-image: linear-gradient(90deg, #ff6b6b, #4ecdc4) 1;
}
注意三点：
立即学习“前端免费学习笔记（深入）”；
-
border: 4px solid transparent—— 宽度和样式必须存在，颜色设为transparent是为了“让位”给border-image -
linear-gradient(90deg, ...)方向要匹配边框走向（水平渐变对应上下边，垂直渐变对应左右边；若想四边都渐变，得用径向或更复杂技巧） -
1是border-image-slice值，等价于1 1 1 1，表示把渐变图切成 9 端，只取中间区域铺满边框；省略它或写成100%就会失效
兼容性和替代方案要注意什么？
border-image 在现代浏览器（Chrome 16+、Firefox 15+、Safari 6+）支持良好，但 IE 完全不支持。如果项目需兼容 IE，别硬套，改用伪元素模拟更稳妥。
另外，border-image 对圆角（border-radius）的支持有限：渐变边框本身不会随圆角弯曲，视觉上会在拐角处断裂。真要圆角+渐变边框，目前最可靠的方式还是用 outline + filter: blur 模拟，或外层再包一层带渐变背景的容器。
真正容易被忽略的是：border-image 的渐变是“贴图式”的，不是“描边式”的——它把整张渐变图切片后映射到四条边上，所以单侧边无法独立控制起止色，也不响应 border-color 动画。要动态换色，得靠 JS 替换整个 border-image 值，或改用 SVG 边框。
