如何用CSS修复移动端1px边框模糊的问题？

最可靠方案是用::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 会导致伪元素边框整体偏移：下边框上移留白，上边框下移遮内容，左右边框则左右错开。

1. 下边框：必须写 transform-origin: left bottom
2. 上边框：必须写 transform-origin: left top
3. 左边框：用 transform-origin: left top + transform: scaleX(0.5)
4. 右边框：用 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，导致角落发虚、边缘多出半像素黑线。

正确组合是：

1. 伪元素 width: 200%、height: 200%
2. 紧跟着 box-sizing: border-box
3. 再加 transform: scale(0.5)
4. 父元素必须有 position: relative
5. 务必加 pointer-events: none，否则伪元素会拦截点击

线上最常见的“1px 断开”或“圆角处边框消失”，八成是这里漏了 box-sizing 或 pointer-events。

真正难的不是写出那几行 CSS，而是记住：缩放值、原点、盒模型、定位、事件拦截这五个点必须同时对齐，少一个就会在某台手机上突然失效。别信“复制粘贴就能跑”，得亲手调一次 bottom: 0 和 transform-origin 的配合关系，才算真正掌握。