最稳解法是用::after伪元素配合transform: scaley(0.5)实现1物理像素边框，原理是在dpr=2设备上将1px高块纵向压缩一半以精准对齐物理栅格，但需严格满足4个关键样式：position: relative（父元素）、bottom: 0与transform-origin: left bottom匹配、height: 1px（不可用border）、pointer-events: none。
直接用 ::after 伪元素 + transform: scaleY(0.5) 是目前最稳、兼容性最好、也最容易翻车的解法。它不依赖 JS，但漏掉任何一个关键样式，边框就会偏移、断裂或挡住点击。
为什么 transform: scaleY(0.5) 能压出真正 1 物理像素
高清屏（如 iPhone dpr=2）下，border: 1px 实际被渲染成 2 个物理像素，浏览器插值后就发虚。伪元素先画一个 1px 高的块（height: 1px），再纵向压缩一半——在 dpr=2 设备上，这正好落在 1 个物理像素上。不是“变细”，而是让渲染结果精准对齐物理栅格。
注意：scaleY(0.5) 只对 dpr=2 有效；dpr=3 时理论上该用 scaleY(0.333)，但硬编码易因浮点精度失效，实践中统一用 0.5 反而更可靠。
::after 单边边框必须写的 4 个样式
以下缺一不可，否则你会看到半截线、顶部遮盖内容、或点击失灵：
-
position: relative必须加在父元素上，否则::after无法绝对定位到底部 -
bottom: 0和transform-origin: left bottom必须匹配，否则缩放后整体上移 0.5px -
height: 1px不能替换成border-bottom: 1px solid，后者缩放后仍会插值模糊 -
pointer-events: none必须加，否则伪元素会拦截所有点击和滑动
正确示例：
.hairline-bottom {
position: relative;
}
.hairline-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ccc;
transform: scaleY(0.5);
transform-origin: left bottom;
pointer-events: none;
}
全边框要用 scale(0.5) 而不是 scaleY
四边都画时，不能只缩 Y 轴，否则左右边会变粗。必须整体缩放，但要防溢出：
- 伪元素宽高设为
width: 200%; height: 200%，再transform: scale(0.5) - 必须显式写
box-sizing: border-box，否则border: 1px会让伪元素实际尺寸超出父容器 2px -
transform-origin: left top是最安全的选择，尤其在有padding或border-radius的场景下 - 如果父容器有
overflow: hidden，缩放后的伪元素可能被裁掉——因为transform不改变盒模型占位，绝对定位仍按原始 200% 尺寸计算
容易被忽略的两个底层限制
一是 transform: scale() 不提升图层，缩放后仍可能模糊。可加 will-change: transform 或 -webkit-backface-visibility: hidden 强制 GPU 渲染。
二是字体和内容绝不能跟着缩放——所以永远只对纯边框载体（即伪元素）用 scale，别碰文字容器本身。一旦在真实元素上用 scale，内边距、行高、子元素都会变形，修复成本远高于重写伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
