Safari 旧版 border-image 异常的根本原因是 WebKit 对 border-image-slice 百分比解析偏差及 round 模式处理缺陷，需用像素值切片、禁用 fill 和 round、显式书写 -webkit-border-image 并降级 fallback。
border-image 在 Safari 15.6 及更早、iOS WebView（如微信内置浏览器旧版）中常出现边框断裂、重复错位或完全不渲染，根本原因是 Webkit 对 border-image-slice 和 border-image-repeat 的解析存在偏差，不是图片本身问题，而是切图逻辑被错误执行。
为什么 Safari 旧版会把 border-image 切歪
Webkit 旧引擎对 border-image-slice 的百分比解析不一致：比如 border-image-slice: 25% 50%，Chrome 正确按源图宽高分别计算，而 Safari 15.4 会把两个值都按高度算，导致左右边区域被切掉一半；另外，round 模式下若切片尺寸不能整除边框长度，旧 Webkit 容易多铺一格或少铺一格，角上出现空白或重叠。
- 只用像素值最稳：
border-image-slice: 30 30 30 30，避免任何百分比或混用单位 - 禁用
round，改用repeat或stretch——round是旧 Webkit 最容易出错的模式 - 确保边框宽度
border-width是切片值的整数倍，例如切片为30，则设border-width: 60px或90px，减少小数截断误差
-webkit-border-image 必须显式写，且不能省略参数
旧 Webkit 不识别无前缀的 border-image，也不接受简写中省略部分值。哪怕你只改了 repeat，也得把整个声明重写一遍带前缀。
- 必须同时写两套：
border-image: url(...) 30 / 30px repeat;和-webkit-border-image: url(...) 30 / 30px repeat; -
-webkit-border-image不支持fill关键字，所以如果用了border-image-slice: 30 fill，旧 Webkit 会直接忽略整条规则——这时要么放弃中间填充，要么换background-image实现 - Safari 15.2 及更早不支持 SVG 作为
border-image-source，哪怕加了-webkit-前缀也没用，得换成 PNG
SVG 边框图在 iOS WebView 中的 fallback 方案
iOS 微信、QQ 等 App 内置 WebView 基于旧版 Webkit，很多连 -webkit-border-image 都不完整支持，此时不能硬扛，得降级。
- 用
@supports (border-image: none)检测是否支持，不支持就走伪元素 +background路线 - 准备一张横向平铺的 PNG 点状图（如
dots-8x8.png），尺寸严格为 16×8（上下各留 8px 空白），这样border-image-slice: 8才能精准抠出中间点行 - 对关键容器加 class 如
has-border-image，再用 JS 检测getComputedStyle(el).borderImage是否为空字符串，为空则动态加 fallback 类
真正难的不是写对代码，而是你永远不知道用户手机里跑的是哪个 Webkit 小版本——Safari 15.6 和 15.4 对同一行 border-image-slice 的行为可能差 2px。所以切图时宁可多留 2px 冗余，也不要卡着像素边界硬切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
