android 4.4–6.0 webview 对 border-image-repeat 双值语法（如 repeat stretch）支持不全，常忽略第二值导致边框错位；应优先用单值 round 或 js 检测 + solid 边框兜底。
Android 低版本 WebView（特别是 Android 4.4–6.0 内置的 Chromium 30–48）对 border-image-repeat 的双值语法支持不完整，repeat stretch 这类写法常被忽略第二值，导致左右边框拉伸失效、图像错位或视觉断裂。
Android WebView 对 border-image-repeat 的兼容性断层
Android 4.4–5.1 使用的 WebView 基于旧版 Blink，仅识别单值 border-image-repeat，且对 space 和双值写法（如 repeat stretch）基本不解析。即使现代 Chrome for Android 支持良好，系统 WebView 仍可能 fallback 到旧引擎。
- Chrome for Android ≥ 72：完全支持
stretch/repeat/round/space及双值语法 - Android 5.1 系统 WebView（Chromium 48）：仅支持单值，忽略第二个值；
round渲染异常，常退化为stretch - Android 4.4 WebView（Chromium 30）：几乎不支持
border-image-repeat，强制回退到stretch且不触发重绘
repeat 和 stretch 混用时的典型断裂现象
当设置 border-image-repeat: repeat stretch 时，上/下边框按图块平铺，左/右边框拉伸填充——但 Android WebView 若只读取第一个 repeat，就会把四边都当成平铺处理，而边框切片（border-image-slice）若未适配平铺尺寸，就会出现中间拼接缝或边缘截断。
- 常见错误现象：
border-image-slice: 30配合border-width: 30px，但平铺后图块宽度 ≠ 30px → 图像被强行裁切 - 关键陷阱：Android 不会报错，也不降级提示，只是静默渲染异常
- 验证方式：在 Chrome DevTools 的「Rendering」面板勾选「Emulate CSS media features」→ 强制设为
screen+ 低分辨率，观察是否出现锯齿或空白间隙
安全写法：单值 + fallback 边框样式
避免双值语法，统一用单值并确保所有边行为一致；同时为不支持 border-image 的环境提供 solid 边框兜底。
- 优先使用
border-image-repeat: round：它在旧 WebView 中容错性最高，缩放逻辑比repeat更稳定 - 必须用双模式时，改用 JavaScript 检测支持性：
CSS.supports('border-image-repeat', 'round')，再动态加 class - 兜底样式要显式声明：
border: 30px solid #eee必须写在border-image之前，否则会被覆盖 - 切片值建议用百分比：
border-image-slice: 25%比固定像素更适应不同缩放
调试时容易忽略的依赖项
border-image-repeat 不是独立生效的——它严重依赖 border-image-slice 输出的九宫格结构，而后者又受 border-width 实际渲染值影响。Android 上 border-width 可能因缩放因子（devicePixelRatio）被四舍五入，导致切片坐标偏移 0.5px，最终让 repeat 图块错位。
- 检查
border-width是否为整数像素：用getComputedStyle(el).borderTopWidth看计算值是否含小数 - 禁用缩放干扰：在
<meta name="viewport">中设target-densitydpi=device-dpi（仅 Android 4.x 有效） - 不要混用
-webkit-border-image：现代 Android 已不需前缀，反而可能触发双重解析 bug
真正麻烦的不是 repeat 本身，而是它和 slice、width、设备像素比之间那层看不见的耦合——Android 上少一个像素的 rounding error，就足以让整条边框看起来“断开”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
