根本原因是 border-width 为 0 或未显式设置；需先设 border: 2px solid transparent，再用 border-image 配合 /1/ 显式声明填充方式。
border-image 用线性渐变时为什么边框没显示
根本原因通常是 border-width 为 0 或没显式设置，border-image 不会自动 fallback 到普通边框样式。它只在有真实 border 宽度的前提下才生效。
- 必须先写
border: 2px solid transparent（宽度不能是 0，颜色建议用transparent） -
border-image的切片数默认是 1，但线性渐变不需要切片，得加/ 1 /显式声明填充方式 - 部分老浏览器（如 Safari border-image: linear-gradient() 支持不全，需加
-webkit-border-image
正确写法示例：
div {
border: 3px solid transparent;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
}
border-image 的 slice 值设成多少才不影响渐变效果
border-image-slice 控制图像如何切分并映射到边框区域。对纯渐变来说，只要不裁掉关键色带，数值本身影响不大；但设错会导致渐变被拉伸、重复或截断。
- 用
1最稳妥：表示“不分割，整张图铺满四条边”，适合线性/径向渐变 - 避免用百分比（如
30%）或带单位的值（如20px），容易意外裁剪渐变起始点 - 如果用了
fill关键字（如border-image-slice: 1 fill），可能让渐变溢出到元素内容区——多数场景不需要fill
Chrome 和 Firefox 渲染 border-image 渐变不一致
差异主要来自默认 border-image-repeat 行为：Firefox 默认 stretch，Chrome 更倾向 repeat（尤其在高 DPR 屏幕下），导致渐变衔接处出现色块或断裂。
立即学习“前端免费学习笔记（深入）”；
- 显式声明
border-image-repeat: stretch能统一行为 - 若想平滑衔接，改用
round，但要注意渐变方向需配合（例如水平渐变配repeat水平边，垂直渐变配repeat垂直边） - 移动端 Safari 对
border-image-repeat: round支持不稳定，优先选stretch
border-image 渐变在缩放或高 DPI 下模糊或偏移
本质是 border-image 把渐变当“位图”处理，缩放时浏览器按像素重采样，不像原生 CSS 渐变能矢量缩放。
- 这不是 bug，是规范定义的行为：CSS 渐变作为
border-image源时，会被栅格化一次，后续缩放即失真 - 替代方案：用
outline+mask模拟（复杂但可缩放），或改用伪元素 +background: linear-gradient()手动定位边框区域 - 如果坚持用
border-image，建议限定最大缩放比例（如@media (min-resolution: 2dppx)下降级为纯色边框）
真正麻烦的是，这个失真没法靠 image-rendering 修复——那个属性对 border-image 无效。
