根本原因是SVG渲染器将逻辑像素误当作设备像素采样，导致subpixel插值使虚线间隙被“抹开”；必须同时满足：声明整数viewBox、路径用整数坐标、border-width取整值、加image-rendering: crisp-edges/-webkit-optimize-contrast。
border-image用SVG源时为什么在高DPI下模糊
根本原因不是CSS不支持，而是SVG渲染器把逻辑像素当设备像素采样。比如border-width: 1.5px在2x屏实际是3物理像素，但浏览器会做subpixel插值，虚线间隙被“抹开”。Safari、Chrome在Retina或Windows缩放125%场景下尤其明显。
关键触发条件有三个：viewBox缺失、SVG路径坐标含小数（如d="M0.5,0.5"）、border-width非整数。三者任一存在，border-image就大概率糊。
如何让SVG边框在缩放时保持锐利
必须同时满足以下四点，缺一不可：
-
SVG源文件声明viewBox="0 0 100 100"（宽高必须为整数，且与内部坐标系对齐） - 所有路径使用整数坐标，删掉
.5类小数（M10,10 L20,10✅，M10.5,10.5❌） -
CSS中border-width设为整数值（1px、2px），避免1.33px这类缩放后生成的小数 - 容器加
image-rendering: crisp-edges（Chrome/Firefox）和image-rendering: -webkit-optimize-contrast（Safari/iOS）
为什么image-rendering有时不起作用
这个属性只对border-image加载的SVG贴图生效，且前提是SVG本身已满足上述整数约束。常见失效场景包括：
立即学习“前端免费学习笔记（深入）”；
-
border-image-source指向PNG而非SVG——image-rendering对位图边框无效 - 构建工具自动压缩SVG，把整数坐标转成小数（如
10→10.0000001） - 第三方CSS（如Normalize.css）覆盖了你的设置，需用
!important或更高优先级选择器 - 容器未触发重绘（比如仅改
transform但没动尺寸），样式未重新应用
替代方案：什么时候该放弃border-image
如果项目要兼容IE或需要动态宽度适配，border-image + SVG这条路容易翻车。更稳的做法是：
- 用
box-shadow模拟单边边框（box-shadow: 0 0 0 1px #000） - 对纯色边框，直接用
border+border-radius，配合background-clip: padding-box防溢出 - 需要虚线/渐变边框时，改用
mask或clip-path裁剪一层独立div，里面放SVG或Canvas绘制
真正麻烦的从来不是写几行CSS，而是SVG源文件坐标是否对齐、构建流程是否污染了整数精度——这两点漏掉一个，前面所有设置都白搭。
