border-image 配合 linear-gradient 无效主因是 border-style 未设为 solid 等非 none 值，且需设 border-width≥1px、border-image-slice 为 1、完整简写语法如 border-image: linear-gradient(...) 1 / 2px。
border-image 配合 linear-gradient 为什么没效果
多数情况是 border-style 没设成非 none 值，导致 border-image 被忽略。CSS 规范明确要求：只有当边框样式不为 none 或 hidden 时，border-image 才会生效。
实操建议：
- 必须显式设置
border-style: solid（或dashed/dotted），哪怕边框宽度很小 -
border-width不能为0；建议至少设为1px，否则渐变边框不可见 -
border-image-slice默认是100%，对渐变图无效，得改成1（数字值）才能正确切片并铺满
错误示例：border: 2px none; border-image: linear-gradient(...); → 完全不渲染
linear-gradient 作为 border-image 的写法细节
不能直接写 border-image: linear-gradient(...)，必须套一层 border-image-source 的语法糖，即用 border-image 简写属性时，要包含 source、slice、width 等字段。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 完整写法形如：
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1 / 2px; -
1是border-image-slice，表示“不分割”，让渐变完整拉伸到边框区域 -
/ 2px是border-image-width，它会覆盖原始border-width，但只影响图像渲染区域，不影响盒模型布局 - 方向角（如
45deg）是相对于边框盒的坐标系，不是元素本身——顶边渐变从左到右，右边渐变从上到下
兼容性与 fallback 处理
Firefox 和 Safari 对 border-image + linear-gradient 支持较好，但旧版 Chrome（
实操建议：
- 加一层传统纯色边框作降级：
border: 2px solid #ccc;写在border-image上方，被覆盖则生效，失效则兜底 - 避免在
border-radius> 0 的元素上强依赖该效果——圆角会裁剪掉border-image的角部，且各浏览器裁剪逻辑不一致 - 不要用
border-image-outset，它在渐变场景下行为不可控，多数时候反而造成空白间隙
替代方案：box-shadow 模拟渐变边框的适用边界
当 border-image 不稳定或需要圆角完美匹配时，box-shadow 是更稳妥的备选，但它本质是“外发光”，无法替代内边框或带内描边的 UI 场景。
实操建议：
- 单侧模拟：用
box-shadow: inset 0 0 0 2px linear-gradient(...)（注意inset关键字） - 四边都需：需配合伪元素或额外 wrapper，因为
box-shadow不支持分别控制四边颜色 - 性能提示：大量使用
box-shadow+ 渐变可能触发重绘开销，滚动中易卡顿，而border-image是合成层友好型
真正难处理的是既要圆角、又要响应式缩放、还要支持 border-collapse 的表格边框——这种场景目前没有干净解法，得接受视觉妥协或 JS 辅助测量。
