直接套用 SVG 作 border-image 会变形，因 stretch 拉伸破坏虚线节奏；需拆 path 为四段、留空四角，用 border-image-slice:20 fill 并确保 viewBox 匹配 border-width，禁用 stroke-linecap:round，且 border-radius ≤ border-width/2。
border-image 用 SVG 实现圆角虚线框，为什么直接套用会变形？
因为 border-image 默认拉伸（stretch）裁剪后的边框切片，而 SVG 虚线路径本身不含「角部独立控制」逻辑，圆角处的虚线段会被强行拉伸或压缩，导致断点错位、虚实不均甚至线条断裂。
- 必须把 SVG 的
<path></path>拆成四段：上、右、下、左，每段只画直线部分，**四个角留空**（靠border-radius渲染） -
border-image-slice: 20 fill是关键——fill让中间区域显示（用于撑开边框宽度），数值 20 要 ≥ 实际border-width，否则切片失效 - SVG 中不能用
stroke-linecap: round，它会让虚线端点凸出圆角范围，造成视觉溢出
怎么写一个能对齐圆角的 SVG 边框源？
核心是让 SVG 的 viewBox 宽高严格匹配 border 宽度，并在左右/上下两端预留「角部间隙」。例如设 border-width: 4px，就用 4×4 的 viewBox，且路径只画中间 2px 长度的虚线段：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4"> <path d="M2 0 L2 4" stroke="#666" stroke-width="2" stroke-dasharray="2,2" fill="none"/> </svg>
- 这个 SVG 只负责「竖直方向」的虚线；水平方向需另写一个（
d="M0 2 L4 2"），但实际可复用同一 SVG，靠border-image-repeat: repeat和方向自动适配 - 如果要支持
border-radius: 8px，SVG 本身不用画圆角，但 CSS 中border-radius值必须 ≤border-width的一半，否则角部虚线会被裁掉 - 导出 SVG 时禁用「响应式」（即去掉
width/height属性），否则在某些浏览器中缩放异常
border-image + SVG 在 Safari 和旧版 Chrome 上常见报错
典型错误是虚线完全不显示，控制台静默，连 fallback 实线都没有——大概率是 MIME 类型或 base64 编码问题。
- 本地文件（
file://协议）下，Safari 拒绝加载内联 data URI 的 SVG，必须走 HTTP 服务或改用外部.svg文件引用 - Base64 编码的 SVG 必须以
data:image/svg+xml;base64,开头，且中间不能换行、不能有空格，推荐用 Node.js 的Buffer.from(svgStr).toString('base64')生成 - 旧版 Chrome（≤87）不支持
border-image-slice的fill关键字，得补一层border-image-slice: 20（无 fill），并确保内容区不透明
比 border-image 更稳的替代方案：box-shadow 模拟虚线框
当兼容性或维护成本压过「必须用 border」的需求时，box-shadow 是更可控的选择，尤其适合固定尺寸容器。
立即学习“前端免费学习笔记（深入）”；
- 用多层
box-shadow模拟虚线：例如box-shadow: 0 0 0 2px #000, 0 0 0 4px transparent, 0 0 0 6px #000，再配合filter: drop-shadow(...)做虚化边缘 - 真正实用的是
mask+conic-gradient组合：用 CSS Mask 切出虚线轮廓，再叠一层border-radius圆角，无 SVG、无 JS、纯 CSS - 但注意：所有基于
box-shadow或mask的方案，都无法响应元素内容尺寸变化（比如文字换行导致高度突变），而border-image是原生 border 行为，这点不可替代
真正麻烦的不是写法，而是 SVG 路径和 CSS border-width、border-radius 三者之间的数值耦合——差 1px，圆角处就可能漏一截实线。
