border-image 支持 linear-gradient，但需配合 border-image-source、border-image-slice 和 border-image-width 使用；未设 slice 会导致只显四角，未设 width 可能不显示；与 border-radius 共存时渲染异常，兼容性需 fallback。
border-image 不支持直接写 linear-gradient？
不是不支持，而是必须配合 border-image-source 的语法规范来写——linear-gradient() 本身可以作为值传入，但浏览器会把它当“图像”处理，所以得配 border-image-slice，否则渐变边框大概率不显示或只显示一角。
-
border-image是复合属性，拆开写更可控：border-image-source+border-image-slice+border-image-width -
linear-gradient(to right, red, blue)必须放在border-image-source里，不能塞进border简写中 - 如果没设
border-image-slice: 1（或100%），渐变会被默认切掉中间部分，只留四个角，看起来像没生效
为什么 border-image-width 要显式设置？
因为 border-image 默认复用 border-width，但渐变是“图像”，图像边框的渲染逻辑和纯色边框不同：它需要明确知道每条边多宽才能拉伸/平铺。不设的话，有些浏览器（比如 Safari）会回退到 0，导致看不见边框。
- 必须用
border-image-width单独设，例如border-image-width: 8px - 它支持四值语法，比如
border-image-width: 4px 8px 4px 8px，对应上右下左 - 若同时写了
border: 2px solid transparent，只是占位用，真正起作用的是border-image-width
linear-gradient 边框在圆角下失效？
是的，border-radius 和 border-image 共存时，大多数浏览器（Chrome/Firefox/Safari）会优先裁剪图像边框，导致圆角处渐变断裂、白边或锯齿。
- 目前没有标准方案让
border-image自动适配border-radius - 临时解法：用
background-clip: padding-box+background模拟边框（需额外内边距避让内容） - 或者改用
box-shadow: inset叠加两层渐变模拟，但仅适用于固定宽度边框 - 真实项目中，建议把圆角需求和图像边框需求拆开评估——要圆角就别强求
border-image，要渐变边框就接受直角
兼容性与 fallback 怎么写？
IE 完全不支持 border-image，Edge 16+ 支持但对 linear-gradient 作 border-image-source 的支持从 Edge 79 才稳定；移动端 Android 4.4+ 基本可用，但旧版 UC / QQ 浏览器可能降级失败。
- 必须写 fallback：先定义
border: 2px solid #ccc，再覆盖border-image相关属性 - 不要依赖
@supports (border-image: 1)，它无法准确识别linear-gradient是否被支持，稳妥做法是用 JS 检测或靠 CSS 顺序降级 -
border-image-slice: 1在 Safari 9–12 下有 bug，建议写成border-image-slice: 1 fill显式声明 fill 行为
真正难的不是写对那几行 CSS，而是搞清 border-image-slice 怎么切、border-image-width 怎么跟实际边框对齐、以及圆角和渐变之间那个无法调和的底层渲染冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
