直接写border: 1px在Retina屏上必然变粗，是因DPR=2或3时1px映射为2或3物理像素；border: 0.5px不可靠，因旧版Safari和多数安卓WebView会忽略或取整为1px，且0.333px常被解析器丢弃；::after+transform: scaleY(0.5)是兼容性最佳方案，需父元素position: relative、伪元素height: 1px+background-color、transform-origin: 0 100%、pointer-events: none及-webkit前缀。
直接写 border: 1px 在 Retina 屏上必然变粗，这不是 bug，是 window.devicePixelRatio（DPR）在起作用——DPR=2 时，1px CSS 像素占 2 物理像素；DPR=3 时占 3 物理像素。想“看起来是 1px”，必须绕过浏览器对 border 的默认渲染逻辑。
为什么 border: 0.5px 不可靠
看似最直觉的解法，实际兼容性极差：
- iOS 8+ 支持
0.5px，但旧版 Safari、多数安卓 WebView 会直接忽略或向上取整为1px -
0.333px在 DPR=3 设备上常被 CSS 解析器丢弃，不生效 - 非整数
border-width在flex/grid容器中可能触发重排或尺寸抖动 - 媒体查询
@media (-webkit-min-device-pixel-ratio: 2)只能兜底 DPR≥2，无法区分 DPR=2 和 DPR=3 的渲染差异
::after + transform: scaleY(0.5) 的正确写法
这是目前兼容性最好、可控性最强的纯 CSS 方案，核心不是“缩放边框”，而是“画一个 2px 高的条，再压缩到视觉 1px”：
- 父元素必须设
position: relative，否则伪元素定位失效 - 伪元素用
height: 1px+background-color，别用border-bottom: 1px——后者受box-sizing和line-height干扰 -
transform-origin必须显式写成0 100%（左下角），Safari 对bottom关键词解析不稳定 - 务必加
pointer-events: none，否则安卓 WebView 可能拦截点击 - 加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不稳定
四边边框与圆角/滚动容器的陷阱
伪元素方案在复杂布局里容易翻车，不是缩放逻辑错了，而是渲染坐标系没对齐：
立即学习“前端免费学习笔记（深入）”；
- 四边边框时，伪元素需设
width: 200%、height: 200%，再transform: scale(0.5)，并配合box-sizing: border-box，否则边框外扩或被裁切 - 圆角边框：把
border-radius写在父元素上，伪元素只负责边框色块，否则缩放后圆角会被拉伸变形 - 滚动容器中边框消失：父容器有
overflow: hidden时，缩放前的 200% 尺寸可能被裁掉——解决办法是加transform: translateZ(0)或will-change: transform强制图层提升
真正该优先检查的，是 DevTools 的 Computed 面板里 border、padding、line-height 的实际值是否全为整数，以及是否被系统字体缩放（如 iOS「更大字体」）悄悄改写——那才是偏差真正的藏身之处。
