border-image 在旧版浏览器失效是因默认行为、切片逻辑和渐变支持三处不一致导致的静默退化；需声明 border-width、避免单位、检查资源、用 background-clip 模拟、统一 repeat 单值、处理圆角兼容性，并手动降级。
border-image 在旧版浏览器失效，不是写法错，而是默认行为、切片逻辑和渐变支持三处不一致导致的静默退化。
为什么写了 border-image 却显示纯色边框？
最常见原因是没声明显式 border 宽度或设成了 none ——border-image 必须依赖 border-width 才能触发渲染。旧版 IE 和部分 Android WebView 会直接忽略整条声明，回退到 border: 1px solid #ccc 这类默认值。
- 必须写
border: 20px solid transparent（不能只写border-image） -
border-image-slice值不能带单位，48px是错的，48或25%才有效 - 图片 404 或跨域时，浏览器不会报错，但会静默降级为纯色边框；建议先用
background-image测试资源是否可加载
Safari 15.4 之前不支持 linear-gradient() 作 border-image-source
iOS Safari 直到 15.4 才开始支持将渐变作为 border-image-source，此前版本会完全忽略该声明，连 border-image-slice 都不解析。这不是 bug，是 WebKit 长期未实现的特性。
- 不要尝试用
to right替代角度写法，Safari 对关键词解析更不稳定 - 改用
background-clip: border-box+padding模拟：设border: 4px solid transparent，再用background: linear-gradient(...)并加background-clip: border-box，最后padding: 4px推内容 - 该方案在 iOS 全版本稳定，且支持
border-radius，不会像border-image那样被裁成直角
Android 4.4–6.0 WebView 对 border-image-repeat 解析异常
这些系统内置 WebView 基于旧版 Blink，只识别单值 border-image-repeat，遇到 repeat stretch 会丢弃第二值，导致左右边拉伸失效、图像错位或出现白缝。
- 统一用单值：
border-image-repeat: round（容错性最高）或stretch（适合纯色渐变） - 避免百分比
border-image-slice在缩放场景下失准，但若需响应式，25%比固定像素更可靠 - 用
CSS.supports('border-image-repeat', 'round')做 JS 检测，不支持时加降级 class，比如.no-border-image { border: 3px solid #eee; }
border-radius 和 border-image 天然不兼容
W3C 规范明确要求 border-image 不参与圆角裁剪，它始终绘制在原始直角路径上。哪怕你写了 border-radius: 12px，四角仍是尖的。
- 不能靠
border-image-slice: 1 fill补救——fill只影响中间区域，不改变裁剪路径 - 轻量解法是
clip-path: inset(0 round 12px)，直接对元素本身裁出圆角 - 如果需要动画或高缩放稳定性，伪元素法更可控：用
::before绘制一层渐变边框，position: absolute+z-index: -1覆盖，但要注意top/left偏移量要精确抵消border-width和padding
真正难处理的是「多端表现不一致却无报错」——Safari 静默忽略渐变，Android WebView 静默截断 repeat，IE11 直接跳过整条规则。别指望一条 CSS 通吃，降级必须手动写，且 border 声明一定要放在 border-image 前面，否则会被覆盖掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
