用伪元素+transform: scale()是最优方案，需配合transform-origin和box-sizing: border-box防错位溢出；scale(0.5)在dpr=2设备上将1px边框压缩至1物理像素，origin不设则偏移，全边框须200%尺寸+border-box+scale(0.5)。
直接结论：用伪元素 + transform: scale() 是目前最可控、兼容性好、且不破坏布局的方案，但必须配合 transform-origin 和 box-sizing: border-box 才能避免错位或溢出。
为什么 transform: scale(0.5) 能“压”出视觉 1px
高 DPR 设备（如 iPhone 的 dpr=2 或 dpr=3）下，border: 1px 实际被渲染为 2 或 3 个物理像素，浏览器插值拉伸后就发虚、变粗。缩放不是魔法——它是先画一个标准 1px 边框（比如伪元素里设 border-bottom: 1px solid #000），再用 transform: scaleY(0.5) 把它纵向压缩一半，在 dpr=2 设备上刚好落到 1 个物理像素高度。
注意：0.5 对应 dpr=2；dpr=3 应该用 scaleY(0.333)，但实践中统一用 0.5 已覆盖绝大多数场景，且更稳定。硬编码 0.333 反而容易因浮点精度或 SCSS 编译问题失效。
transform-origin 不设就偏移
缩放默认以元素中心为原点，不设 transform-origin 会导致伪元素边框整体上移或下移，底部留白、顶部遮盖内容。
- 下边框：必须写
transform-origin: left bottom - 上边框：必须写
transform-origin: left top - 全边框：统一用
transform-origin: left top，同时伪元素宽高设为200%再缩放
漏掉这个，scale() 就等于白写——你看到的不是细线，是错位的半截线。
全边框时 box-sizing: border-box 不能省
当伪元素要画四边 border: 1px solid，如果不设 box-sizing: border-box，它的实际尺寸 = 内容宽高 + 左右各 1px + 上下各 1px → 缩放后仍会溢出父容器 1px，导致角落发虚、边缘多出半像素黑线。
正确组合是：
- 伪元素
width: 200%、height: 200% - 紧跟着
box-sizing: border-box - 再加
transform: scale(0.5) - 父元素必须有
position: relative
线上最常见的“1px 断开”或“圆角处边框消失”，八成是这里漏了 box-sizing。
别让伪元素挡住点击事件
伪元素默认参与事件流，如果没加 pointer-events: none，它会拦截点击、滑动等操作，尤其在列表项、按钮上极易引发交互失灵。
务必加上：
.hairline::after {
pointer-events: none;
}
另外，如果父容器设了 overflow: hidden，缩放后的伪元素可能被裁掉——因为 transform 不改变盒模型计算，绝对定位仍按原始尺寸占位，只是视觉上缩小了。这种情况下要么去掉 overflow，要么改用 background-image 或 box-shadow 替代方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
