border-image 在 safari 和旧版 webview 中失效的主因是 border-image-slice 默认值不一致（safari 为 100%，其他为 1），需显式设为 1；单边生效需先 border: 0 再单独声明；圆角兼容需用伪元素模拟；必须手动设置 fallback 边框且确保 border-style 存在。
border-image 在 Safari 和旧版 WebView 中失效
最常遇到的问题是：代码在 Chrome/Firefox 正常，但在 iOS Safari（尤其 iOS 15.6 之前）或安卓 WebView 里边框变纯色、渐变被裁掉、甚至整块区域被填满。根本原因是 border-image-slice 默认值在不同引擎中不一致 —— Safari 默认为 100%，而其他浏览器默认为 1，导致梯度图被拉伸失效。
必须显式写死 border-image-slice: 1，不能省略；如果用百分比切割（比如 border-image-slice: 25% 30% 15% 20%），也要确保所有目标环境支持该语法（IE11 不支持百分比 slice）。
- 避免用
to right这类方向关键词，改用角度写法，如linear-gradient(90deg, #f00, #00f) -
border-width超过4px时，旧版 Edge 可能渲染成离散色块，建议控制在1px–4px范围内 - 渐变作为
border-image-source时，不要依赖border-image-outset或复杂border-image-repeat，round/repeat 在移动端支持度差
移动端 border-image 只生效在单边（如只 left）
典型现象：设了 border-left: 3px solid + border-image，结果整个四边都显示了边框图 —— 这是因为部分移动浏览器把 border-image 当作全局边框处理，无视单边设置。
解决方法不是加更多 hack，而是「清空所有边，再单独声明」：
- 先写
border: 0彻底清除默认边框 - 再单独设
border-left: 3px solid（或其他单边） - 最后加
border-image: linear-gradient(...) 1
这样能绕过移动端对复合边框的解析歧义，实测在 iOS 14+ 和主流安卓 WebView 中稳定生效。
border-radius 和 border-image 一起用就失效
圆角 + 渐变边框组合时，border-image 会直接被忽略，或者圆角处出现硬边/断裂 —— 因为规范没定义两者如何协同，各浏览器实现差异极大（Safari 尤其明显）。
别硬刚兼容性，换思路：
- 用伪元素
::before绝对定位一层带border-image的矩形，再给它加border-radius - 主元素只负责圆角和背景，伪元素负责“描边”，两者尺寸错开
1px避免重叠缝隙 - Retina 屏下若发现模糊，给伪元素加
transform: scale(0.5)+transform-origin精确对齐
降级 fallback 方案必须显式声明
border-image 没有自动降级机制。当它失效时，浏览器不会回退到 border，而是直接显示无边框（或默认 border-style: none）。
所以必须手动补一层基础边框：
- 在
border-image前写border: 2px solid #ccc（颜色要和渐变主色接近） - 不要用
border-color: transparent，这会导致降级后完全不可见 - 如果用图片做
border-image-source，记得提供border-image-source: url(...)同时配border: 2px solid #eee，否则图片加载失败就彻底没边框
真正容易被忽略的是：border-image 的生效依赖于 border-style 存在，哪怕只是 solid，漏写就会全盘失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
