不能——border-image 不直接支持 linear-gradient()，但可通过 border-image-source 配合 border-image-slice: 1 和显式 border-width 间接实现；需注意浏览器兼容性、切片单位及性能降级。
border-image 能不能直接做渐变边框？
不能——border-image 本身不接受 linear-gradient() 作为「图像源」的直接值，但可以间接实现。浏览器会把渐变当作 image 类型处理，只要写法合规，现代浏览器（Chrome 12+、Firefox 16+、Safari 15.4+）都支持用渐变函数填充 border-image-source。
正确写法：border-image-source + gradient 必须配齐三要素
漏掉任意一项都会退化为纯色边框或失效：
-
border-image-source：必须设为linear-gradient(...)或radial-gradient(...) -
border-image-slice：必须显式设为1（或100%），否则渐变会被切片裁剪，只显示中间一小块 -
border-width：必须大于0，且建议用具体数值（如4px），不能依赖border-style: solid默认宽度
示例：
.grad-border {
border: 4px solid transparent;
border-image-source: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-image-slice: 1;
border-image-width: 4px;
}
常见失效原因：slice 值写成 100 或没写单位
border-image-slice 的默认值是 100（无单位），它表示「按像素切」而非「按百分比」。当你传入渐变时，这个默认值会让浏览器尝试从一张「0×0 尺寸图」里切出 100px 区域——结果就是空白。所以必须写成：
立即学习“前端免费学习笔记（深入）”；
-
border-image-slice: 1（推荐，等价于100%） - 或
border-image-slice: 100%（语义更明确） - 别写
border-image-slice: 100，也别省略这一行
另外，border-image-width 如果不设，会回退到 border-width，但某些旧版 Safari 对此兼容性差，显式声明更稳。
性能与降级：渐变边框在滚动/动画中可能闪烁
这不是 bug，而是渲染机制问题：部分浏览器对 border-image 使用的渐变纹理未启用硬件加速，快速滚动或配合 transform 动画时可能出现丢帧或边缘锯齿。应对方式：
- 避免在高频重绘区域（如列表项、无限滚动容器）大量使用
- 需要动效时，优先考虑用
outline+filter: drop-shadow()模拟，或改用伪元素::before绘制带渐变的绝对定位边框 - 务必加降级：
border: 2px solid #ccc放在border-image前面，确保不支持的环境仍可见边框
真正难的不是写出来，而是想清楚要不要用——它看起来轻量，实则对渲染管线更敏感，尤其在移动端 WebView 中表现不稳定。
