必须显式声明 border 基础属性（如 border: 2px solid transparent）并配合 border-image-slice: 1 fill，否则 border-image 中的 linear-gradient 无法渲染；圆角、缩放及 Firefox 兼容性问题需改用 background + background-clip 等替代方案。
border-image 和 linear-gradient 配合用不了纯色边框 fallback
直接写 border-image: linear-gradient(...) 会失效，因为 border-image 默认需要配合 border-image-slice 才能生效，且它不替代 border 的基础样式。如果没设 border 宽度和样式（比如 solid），视觉上就看不到边框——渐变图被切片后根本没区域可渲染。
必须显式声明 border 基础属性，否则 border-image 形同虚设：
div {
border: 2px solid transparent; /* 关键：宽度+样式+transparent */
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
}其中 1 是 border-image-slice 的简写，默认为 1（即 1px 切片），但更稳妥写法是补全：
-
border-image-slice: 1表示不裁剪图像，整张渐变图铺满边框区域 - 若边框宽 2px，
slice: 2会让渐变从边框内侧开始截取，容易露白或错位 - 推荐统一用
border-image-slice: 1 fill，fill可让渐变填充边框内区（非必需，但兼容性更稳）
border-image 不支持圆角边框的渐变连续性
当元素有 border-radius 时，border-image 渲染出的渐变在圆角处会断裂、拉伸或重复，尤其在 Safari 和旧版 Chrome 中明显。这不是 bug，而是规范定义：边框图像是先按矩形边框生成，再套圆角遮罩，导致图像被“硬裁”。
立即学习“前端免费学习笔记（深入）”；
解决思路不是调参数，而是换方案：
- 放弃
border-image，改用background+padding模拟边框（最可靠） - 用
outline+outline-offset配合渐变背景（仅适用外边框场景） - 对小尺寸元素，可用伪元素
::before绝对定位一层带渐变的矩形框
例如背景模拟法：
div {
padding: 2px; /* 模拟 2px 边框宽度 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-clip: padding-box;
border-radius: 8px;
}注意 background-clip: padding-box 是关键，防止渐变溢出到内容区。
border-image 在高缩放或 Retina 屏下容易模糊或锯齿
border-image 底层把渐变当作位图处理，缩放时浏览器不会重绘矢量渐变，而是拉伸像素，导致边缘发虚或色带。这不是 CSS 编写问题，是渲染机制限制。
验证方式：打开 Chrome DevTools → Emulation → Device Scale Factor 设为 2，观察边框是否糊掉。
规避方法：
- 优先使用
background+background-clip方案，它是真矢量，缩放无损 - 若必须用
border-image，避免在transform: scale()或zoom场景中使用 - 不要给
border-image加filter（如blur），会进一步加剧失真
Firefox 下 border-image-slice: 1 不填 fill 会丢失顶/底边
Firefox 对 border-image-slice 的解析更严格：不加 fill 时，只渲染左右边，上下边可能完全不可见，尤其当渐变角度非水平/垂直时。
正确写法必须包含 fill 关键字：
div {
border: 3px solid transparent;
border-image: linear-gradient(135deg, #6a11cb, #2575fc) 1 fill;
}漏掉 fill 就等于告诉 Firefox：“只用图片的边框部分，别填中间”，而渐变本身没有“中间图像内容”，结果就是上下边消失。这不是 bug，是规范里 fill 的语义要求。
其他浏览器（Chrome / Safari）会自动 fallback 补上，但 Firefox 不会——所以只要支持 Firefox，fill 就不能省。
