最可靠方案是用::after伪元素配合transform:scaley(0.5)，因高dpr设备下1px border实际渲染为多物理像素，缩放可精准压至1物理像素；必须显式设置transform-origin防错位，全边框需box-sizing:border-box+宽高200%+scale(0.5)，且父元素设position:relative和pointer-events:none。
直接用 ::after 伪元素 + transform: scaleY(0.5) 是目前最可靠、不破坏布局、兼容性好（iOS 8+/Android 4.4+）的方案。其他方法要么失效（如 border-width: 0.5px 在部分 Android 浏览器里被四舍五入为 0），要么维护成本高（如 border-image 换色就得换图）。
为什么 scaleY(0.5) 能压出真正的 1 物理像素？
高 DPR 设备（如 iPhone 的 dpr=2）下，border: 1px 实际被渲染成 2 个物理像素，浏览器插值后发虚变粗。缩放不是“猜”，而是先画一个标准 1px 高的伪元素（比如 height: 1px 或 border-bottom: 1px），再用 transform: scaleY(0.5) 把它纵向压缩一半——在 dpr=2 设备上，刚好落到 1 个物理像素高度。
注意：0.5 对应 dpr=2；dpr=3 理论上该用 0.333，但实践中统一用 0.5 更稳——浮点精度、SCSS 编译、浏览器渲染抖动都会让硬写 0.333 反而失真。
transform-origin 不设就错位，必须按方向显式指定
缩放默认以元素中心为原点，不设 transform-origin 会导致伪元素边框整体偏移：下边框上移留白，上边框下移遮内容，左右边框则左右错开。
- 下边框：必须写
transform-origin: left bottom - 上边框：必须写
transform-origin: left top - 左边框：用
transform-origin: left top+transform: scaleX(0.5) - 右边框：用
transform-origin: right top+transform: scaleX(0.5)
漏掉这个，scale() 就等于白写——你看到的不是细线，是半截飘着的线。
全边框时 box-sizing: border-box 和 width/height: 200% 缺一不可
如果伪元素要画四边 border: 1px solid，不设 box-sizing: border-box，它的实际尺寸 = 内容宽高 + 左右各 1px + 上下各 1px → 缩放后仍会溢出父容器 1px，导致角落发虚、边缘多出半像素黑线。
正确组合是：
- 伪元素
width: 200%、height: 200% - 紧跟着
box-sizing: border-box - 再加
transform: scale(0.5) - 父元素必须有
position: relative - 务必加
pointer-events: none，否则伪元素会拦截点击
线上最常见的“1px 断开”或“圆角处边框消失”，八成是这里漏了 box-sizing 或 pointer-events。
真正难的不是写出那几行 CSS，而是记住：缩放值、原点、盒模型、定位、事件拦截这五个点必须同时对齐，少一个就会在某台手机上突然失效。别信“复制粘贴就能跑”，得亲手调一次 bottom: 0 和 transform-origin 的配合关系，才算真正掌握。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
