retina屏上1px边框模糊是因亚像素插值导致，真解法是让边框精准落在单个物理像素上；0.5px无效因兼容性差且无法响应式适配；::after+scale方案需同时满足定位、pointer-events、transform-origin、盒模型四条件；js注入data-dpr才能精准匹配不同dpr。
直接写 border: 1px 在 Retina 屏上必然模糊，这不是代码有误，而是浏览器把 1 个 CSS 像素映射到多个物理像素后做了亚像素插值——你看到的“虚”，是渲染引擎在非整数位置画线导致的混合模糊。真解法不是调细边框，而是让边框精准落在单个物理像素上。
为什么 border: 0.5px 大概率失效
它只是逻辑值，不等于 1 物理像素；多数安卓 WebView 和 iOS 12 及更早版本根本不识别，直接丢弃或四舍五入为 1px；即使 Safari 13+ 支持，devicePixelRatio === 3 时 0.33px 仍会被渲染为 1.5 物理像素，照样发虚。硬编码小数宽度无法响应式适配不同 DPR 值。
::after + transform: scale() 必须配齐的四个条件
这是目前最可控、兼容性最好的方案，但漏掉任意一项就会断开、偏移或拦截点击：
- 父元素必须设
position: relative，否则伪元素会脱离上下文定位到body - 伪元素需加
pointer-events: none，否则在微信 WebView 等环境会拦截所有交互 -
transform-origin必须显式写成0 0（全边框）或0 100%（下边框），Safari 对bottom关键词解析不稳定 - 四边边框场景下，伪元素要设
top: 0; left: 0; right: 0; bottom: 0;+width: 200%; height: 200%; box-sizing: border-box;，否则缩放后会溢出或留白
用 JS 注入 data-dpr 才算真正覆盖主流设备
纯 CSS 方案（如媒体查询 @media (-webkit-min-device-pixel-ratio: 2)）只能兜底 DPR≥2，无法区分 DPR=2 和 DPR=3 的渲染差异。必须用 JS 动态读取 window.devicePixelRatio 并写入根节点类名：
document.documentElement.setAttribute('data-dpr', Math.round(window.devicePixelRatio) || 1);
再配合 CSS：
[data-dpr="2"] .box::after { transform: scale(0.5); }<br>[data-dpr="3"] .box::after { transform: scale(0.333333); }
注意：Math.round() 比直接取整更稳——DPR=2.8 的 Windows 缩放场景下，硬写 0.333 反而因浮点精度抖动失真。
真正难的不是写出那几行 CSS，而是记住：缩放值、原点、盒模型、定位、事件拦截这五个点必须同时对齐；少一个，就可能在某台手机上看到半截飘着的线，或者圆角处边框突然消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
