SVG作border-image在高DPI下模糊的根本原因是SVG未声明viewBox或坐标非整数，导致渲染器错误采样；应设整数坐标、整数border-width，并用image-rendering: crisp-edges强制禁用插值。
border-image 配合 SVG 边框在高 DPI 下依然模糊？
直接说结论：border-image 用 SVG 作源时，若 SVG 内部没声明 viewBox 或尺寸未按物理像素对齐，高 DPI 屏（如 macOS Retina、Windows 缩放 125%/150%）下虚线/渐变边框极易出现抗锯齿失真或半像素模糊。
根本原因不是 CSS 不支持，而是 SVG 渲染器把逻辑像素当成了设备像素去采样——尤其当 border-width 是小数（如 1.5px）或缩放非整数倍时，浏览器会做 subpixel 插值，虚线间隙就被“抹开”了。
- 确保 SVG 源文件有明确
viewBox="0 0 100 100"，且所有路径用整数坐标（避免d="M0.5,0.5 ..."） - CSS 中
border-width尽量用整数值（1px、2px），避开1.33px这类缩放后产生的非整数 - 给容器加
image-rendering: -webkit-optimize-contrast;（Safari）或image-rendering: crisp-edges;（Chrome/Firefox），强制禁用插值（但仅对border-image的 SVG 贴图生效）
用 box-shadow 模拟虚线边框时，多层阴影在不同 DPR 下错位？
这是常见取巧方案，但 box-shadow 的偏移值（offset-x/offset-y）是逻辑像素单位，在 DPR > 1 时，浏览器会把它乘以设备像素比再渲染——如果 shadow 层数多、偏移小（比如模拟 1px 虚线），就容易因舍入误差导致虚线节距不均或断点漂移。
实操上更稳的办法是：只用一层 box-shadow + inset，配合 linear-gradient 背景裁剪出虚线效果，完全绕过多层阴影的叠加误差。
立即学习“前端免费学习笔记（深入）”；
- 不要写
box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent, 0 0 0 3px #000;这类“堆 shadow”做法 - 改用
background: linear-gradient(90deg, #000 50%, transparent 50%); background-size: 4px 1px;，再用background-clip: border-box;+padding挤出边框空间 - 关键：
background-size的两个值都必须是整数，且能被 DPR 整除（例如 DPR=2 时，用4px 2px比3px 1px更稳）
rem/vw 单位设 border-width 导致虚线在缩放后变形？
rem 和 vw 是响应式利器，但用于 border-width 时，它们会随根字号或视口变化而连续缩放——虚线本质是离散的图形模式（dash + gap），连续缩放会让 dash 长度和 gap 宽度不成比例，视觉上变成“越来越实”或“越来越稀疏”，尤其在 pinch-zoom 或系统缩放切换时明显。
真正需要响应式边框粗细时，应该用媒体查询分段控制，而不是靠流式单位“自动过渡”。虚线不是字体，不需要平滑缩放。
- 放弃
border-width: 0.0625rem;这类写法（1rem = 16px → 1px，但缩放后可能变成 1.2px） - 用
@media (-webkit-min-device-pixel-ratio: 2)单独设border-width: 2px;，DPR=1 时用1px - 如果必须用流式单位，改用
clamp()限定范围，例如border-width: clamp(1px, 0.1vw, 2px);，防止无约束缩放
CSS @supports 检测 border-style: dashed 兼容性够用吗？
不够。所有现代浏览器都支持 dashed，但问题出在「虚线渲染质量」：Safari 在 macOS 上对 border-width 小于 2px 的 dashed 边框会强制转成 solid（不报错，也不警告），而 Chrome/Firefox 虽然能画，但在 DPR=2+ 时虚线节距常被压缩到 1 物理像素内，肉眼看起来就是实线。
所以不能只检测语法支持，得结合环境判断是否值得用原生 dashed。
- 优先用
@supports (border-style: dashed) and (not (-webkit-appearance: none))排除旧 Safari - 更稳妥的是 JS 检测：
window.devicePixelRatio > 1 && getComputedStyle(el).borderStyle === 'dashed'后，用el.getBoundingClientRect()看实际渲染宽度是否 ≥ 2 * devicePixelRatio - 一旦发现虚线不可靠，立刻 fallback 到
background + linear-gradient方案——这个组合在所有 DPR 下都像素级精准
虚线边框的“优雅”不在动效或过渡，而在每个物理像素都落得准。越想让它自适应，越要手动切片控制；工具只是手段，最终得看设备怎么画那条线。
