border: 0.5px 在安卓和ios 13以下兼容性差，transform: scale()最稳定，通过高dpr屏幕“先放大再缩放”实现精准物理像素对齐，需配合transform-origin、position: relative、box-sizing等细节。
直接用 border: 0.5px 大概率失效——安卓全系不认，iOS 13 以下也不稳定，别赌兼容性。
为什么 transform: scale() 是当前最稳的选择
它不依赖浏览器对小数 px 的支持，而是利用高 DPR 屏幕下“先放大再缩放”的物理像素对齐原理：画一个 2px 宽的伪元素，再用 scale(0.5) 压回 1 物理像素。关键不是“视觉变细”，而是让边框精准落在单个物理像素上。
-
transform-origin: 0 0必须设，否则缩放后位置偏移，边框错位 - 父元素一定要有
position: relative，否则::after会相对 body 定位 - 单边（如下划线）用
scaleY(0.5)更安全；四边统一用scale(0.5)，但必须配合box-sizing: border-box - 缩放后伪元素可能响应点击事件，加
pointer-events: none避免遮挡
怎么适配不同 dpr 值（2、3、4）
硬写 scale(0.5) 只对 dpr=2 有效；dpr=3 时得缩到 scale(0.333)，否则边框变虚或消失。纯 CSS 方案靠媒体查询兜底：
/* dpr=2 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hairline::after { transform: scale(0.5); }
}
/* dpr=3 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
.hairline::after { transform: scale(0.333); }
}
- 别漏掉
min-resolution，它比-webkit-min-device-pixel-ratio兼容性更好（尤其安卓 WebView） - 如果项目已用 JS 获取
window.devicePixelRatio，可动态给根元素加 class（如data-dpr="3"），再用属性选择器控制，比媒体查询更准 -
scale(0.333)不要写成scale(1/3)，CSS 不解析表达式
伪元素边框常见翻车点
看似几行 CSS 就能搞定，但线上最多的问题都出在盒模型和定位细节上：
- 没设
box-sizing: border-box→ 四边伪元素缩放后溢出父容器，左右/上下多出半像素黑线 - 父容器有
overflow: hidden→ 缩放基于原始尺寸计算，scale(0.5)后伪元素坐标系变小，但绝对定位仍按原宽高占位，容易被裁掉 - 用
border: 1px solid而非background-color画单边 → 边框宽度参与盒模型计算，干扰布局 - 文字容器本身加
transform: scale()→ 字体跟着缩小，必须只作用于伪元素
真正难的不是写出第一版代码，而是确认每个使用场景下的 dpr 值、父容器样式、是否带圆角、有没有 overflow —— 这些细节一漏，1px 就会断开、偏移、发虚，而且很难复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
