为什么CSS border-image在某些WebKit浏览器无法正确拉伸？-css教程-PHP中文网

border-image-slice 默认值在 safari 中为 100%，而 chrome/firefox 为 1，导致渐变边框在 safari 中被错误切为整图并拉伸成色块，必须显式声明 border-image-slice: 1 才能统一行为。

为什么css border-image在某些webkit浏览器无法正确拉伸？

border-image-slice 默认值在 Safari 中是 100%，不是 1

这是最常被忽略的根源：Chrome/Firefox 把 border-image-slice 默认当作 1（即 1 像素单位），而 Safari（尤其是 iOS 15.6 之前）默认是 100%。结果就是，你写 border-image: linear-gradient(...) 30，Safari 实际按 border-image-slice: 100% 解析，整张渐变图被“切掉只剩边缘”，拉伸后只剩一个色块。

必须显式声明 border-image-slice: 1，哪怕你用的是百分比切割（如 25% 30% 15% 20%），也要先重置这个默认值。否则任何 repeat 或 stretch 行为都不可靠。

错误写法：border-image: linear-gradient(90deg, #f00, #00f) 30;（Safari 悄悄变成 100%）
正确写法：border-image: linear-gradient(90deg, #f00, #00f) 1; + 后续再设 border-image-slice: 25% 30% 15% 20%
IE11 不支持百分比 border-image-slice，只认数字，若需兼容得放弃百分比

Android WebView 对 border-image-repeat 双值语法静默失效

Android 4.4–6.0 的系统 WebView（基于 Chromium 30–48）根本不解析 border-image-repeat: repeat stretch 这类双值写法——它只读第一个词 repeat，然后把四边全当成平铺，导致左右边框拉伸失效、图像错位、拼接缝明显。

这不是报错，而是静默降级，你在 DevTools 里看不到警告，但真机上边框就断了。

安全写法只用单值：border-image-repeat: round（旧 WebView 容错性最高）
若必须分方向控制，改用 JS 检测：CSS.supports('border-image-repeat', 'round')，再动态加兜底 class
兜底边框必须写在 border-image 之前：border: 3px solid #eee;，否则会被覆盖

SVG 作 border-image-source 时坐标或 viewBox 不对齐，高 DPI 下直接糊成一片

Retina 或 Windows 缩放 125% 场景下，border-image 用 SVG 源时模糊，根本不是抗锯齿问题，而是渲染器把逻辑像素当设备像素采样。比如 border-width: 1.5px 在 2x 屏实际是 3 物理像素，但浏览器做了亚像素插值，虚线间隙就被“抹开”。

小红书长文-谷歌浏览器

在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。

下载

必须同时满足四个条件，缺一不可：

SVG 文件带整数 viewBox="0 0 100 100"（不能缺，也不能是小数）
所有路径坐标用整数：d="M10,10 L20,10" ✅，d="M10.5,10.5" ❌
CSS 中 border-width 设整数值（1px、2px），禁用 1.33px 类缩放残留
容器加 image-rendering: crisp-edges（Chrome/Firefox）和 image-rendering: -webkit-optimize-contrast（Safari/iOS）