高分屏下1px边框发虚是因css像素被映射到多个物理像素导致亚像素混合；border:0.5px无效因浏览器不支持或四舍五入；伪元素+scale方案需满足position、pointer-events、宽高及transform-origin三要素；必须动态读取dpr并用js注入data-dpr类名适配。
高分屏下 border: 1px 边框发虚、变粗，不是 CSS 写错了，而是浏览器把 1 个 CSS 像素强行映射到多个物理像素后做了插值渲染——你看到的“模糊”，本质是亚像素混合的结果。纯靠改 border-width 或加 box-shadow 都治标不治本。
为什么 border: 0.5px 大概率无效
多数安卓浏览器和旧版 Safari 不支持非整数边框宽度；即使支持（如 iOS 8+），0.5px 在 dpr=3 设备上仍会渲染为 1.5 物理像素，照样模糊。它只是“看起来细一点”，没解决物理像素对齐问题。
-
border: 0.5px是逻辑值，不等于 1 物理像素 - Chrome 和 Firefox 在 dpr≠1 时会四舍五入或丢弃该值，最终仍画成 1px
- 无法响应式适配不同 dpr，硬编码
0.33px更不可靠
伪元素 + transform: scale() 必须配齐三要素
这是目前最可控的方案，但漏掉任意一项，就会出现边框断开、偏移、溢出或挡住点击。
- 父容器必须设
position: relative - 伪元素要加
pointer-events: none，否则拦截所有交互 - 全边框场景下：
width: 200%+height: 200%+box-sizing: border-box+transform: scale(0.5)+transform-origin: left top - 只画下边框时：
transform-origin: left bottom，否则线会往上飘半像素
用 image-set() 或媒体查询加载 @2x 边框图？别试了
边框不是图片，不能用 image-set() 替换；用 background-image: linear-gradient() 画 1px 线虽可行，但圆角、border-radius、border-collapse 场景下极易错位，维护成本高。
- 渐变方案在
border-radius容器里无法自然圆角衔接 - 表格单元格合并时（
border-collapse: collapse），渐变线会重叠或留白 -
image-set()的 url() 路径在 Safari 有解析 bug，且 Firefox 完全不支持
真正起效的前提：动态读取 window.devicePixelRatio
硬写 scale(0.5) 只覆盖 dpr=2，遇到 iPad Pro（dpr=3）或 Windows 125% 缩放（dpr=1.25），依然模糊。必须用 JS 注入根节点类名，再用 CSS 匹配：
document.documentElement.setAttribute('data-dpr', Math.round(window.devicePixelRatio) || 1);
然后写：
[data-dpr="2"] .hairline::after { transform: scale(0.5); }<br>[data-dpr="3"] .hairline::after { transform: scale(0.333333); }
注意：不要用 Math.floor 或 parseInt 截断，dpr=1.5 的设备（如部分 Surface）应归入 2x 分支而非 1x。
最容易被忽略的是 transform-origin 的锚点位置——它必须严格匹配你要画的边，不是“习惯性写 left top”就能通用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
