CSS如何解决移动端1px边框模糊问题：通过transform缩放实现精准线条
先说结论：目前来看，用伪元素配合 transform: scaleY(0.5) 是可控性最好、兼容性也最广的方案。不过，这里头有几个关键点必须注意，尤其是 transform-origin 和 box-sizing: border-box，少了它们，布局错位或者边框溢出的问题就来了。
为什么transform: scaleY(0.5)能“修复”1px？
这事儿得从根儿上说。移动端设备物理像素密度高，比如iPhone的dpr（设备像素比）是2或3。你在CSS里写的 1px，到了屏幕上会被渲染成2个或3个物理像素，视觉上自然就变粗了。
那么，缩放的原理是什么呢？其实很简单：先让伪元素画出一条标准的 1px 边框，然后用 transform: scaleY(0.5) 把它在垂直方向上压扁一半。这样一来，在dpr=2的设备上，这条线刚好就落在1个物理像素的高度上，实现了真正的“细线”效果。
这里有个细节：0.5 这个数值是针对dpr=2的。如果设备dpr=3，理论上应该用 scaleY(0.333)。不过实践中，统一用0.5已经能覆盖绝大多数场景，而且代码更稳定，不必为少数情况做复杂判断。
:after伪元素边框必须设transform-origin
如果不设置 transform-origin，缩放的中心点默认是元素的中心。这会导致一个尴尬的结果：下边框缩放后会整体向上移动，露出空白；上边框则会向下移动。所以，实际使用时，必须根据边框的方向，显式指定缩放的原点：
- 下边框：用
transform-origin: left bottom，确保底部始终紧贴元素边缘，不会偏移。 - 上边框：用
transform-origin: left top，保证顶部对齐。 - 全边框：用
transform-origin: left top，同时需要把伪元素的宽高设为200%，再整体进行scale(0.5)。
来看一个下边框的示例代码：
.hairline-bottom {
position: relative;
}
.hairline-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid #ccc;
transform: scaleY(0.5);
transform-origin: left bottom;
-webkit-transform-origin: left bottom;
}
全边框时box-sizing: border-box不能省
当你想用伪元素画出四条边的边框时，如果漏了 box-sizing: border-box，麻烦就来了。此时伪元素的实际尺寸会变成：内容宽高 + 左右边框 + 上下边框。即便缩放后，它仍然可能溢出父容器大约1个像素，导致边框的角落出现半像素的黑线，或者线条看起来“断开”。
正确的做法是：
- 伪元素设置
width: 200%; height: 200%。 - 紧接着必须加上
box-sizing: border-box。 - 然后使用
transform: scale(0.5)进行整体缩放。 - 当然，父元素别忘了设置
position: relative。
可以说，线上很多“1px边框看起来不对劲”的问题，根源往往就是漏掉了这个 box-sizing。
别盲目套用，先判断是否真需要
并不是所有设备和浏览器都需要动用缩放这个“大招”。事实上，iOS 9+ 以及大多数安卓版的Chrome浏览器，已经能够直接识别并正确渲染 0.5px 的边框了。在这种情况下，强行使用缩放反而可能引入副作用，比如抗锯齿导致的模糊，或者在动画时出现撕裂感。
一个更稳妥的策略是，先做一下能力检测。可以用一小段Ja vaScript代码，创建一个临时元素来测试浏览器是否支持将 0.5px 识别为1个物理像素：
const test = document.createElement('div');
test.style.border = '0.5px solid transparent';
document.body.appendChild(test);
if (test.offsetHeight === 1) {
document.documentElement.classList.add('supports-05px');
}
document.body.removeChild(test);
检测之后，CSS就可以这样写了：
div { border: 1px solid #ccc; }
.supports-05px div { border-width: 0.5px; }
说到底，真正的难点不在于缩放语法本身，而在于你得清楚：什么时候该用缩放、具体缩哪条边、原点应该设在哪里、盒子模型该怎么计算。这些细节一旦出错，追求的“1px”可能就变成了“1.2px”，甚至直接消失一半。
