用::after伪元素+transform:scaley(0.5)是最优方案，需配合transform-origin和box-sizing:border-box；因高dpr下1px被渲染为多物理像素，缩放可精准映射至1物理像素，但须按边指定原点且全边框时伪元素需设200%宽高并box-sizing:border-box。
直接结论：用 ::after 伪元素 + transform: scaleY(0.5) 是当前最可控、兼容性好、且不破坏布局的方案，但必须配合 transform-origin 和 box-sizing: border-box 才能避免错位或溢出。
为什么 transform: scaleY(0.5) 能“修复”1px？
移动端物理像素密度高（如 iPhone 的 dpr=2），CSS 中写的 1px 实际被渲染为 2 个物理像素，视觉变粗。缩放的本质是：先画一个标准 1px 高的块（比如伪元素里设 height: 1px），再用 transform: scaleY(0.5) 把它纵向压扁一半——在 dpr=2 设备上，刚好落到 1 个物理像素高度。
这个 “0.5” 不是魔法数字，它对应 dpr=2；dpr=3 理论上该用 scaleY(0.333)，但实践中统一用 0.5 已覆盖绝大多数场景，且更稳定。
::after + scaleY(0.5) 下边框写法及常见错误
这是最典型的单边实现，但以下几点极易漏掉：
-
position: relative必须加在父元素上，否则::after无法绝对定位到底部 -
bottom: 0和transform-origin: left bottom必须匹配，否则缩放后会向上偏移 0.5px -
height: 1px不能替换成border-bottom: 1px solid，否则缩放后边框会模糊或虚化 - 必须加
pointer-events: none，否则伪元素会拦截点击事件（尤其列表项、按钮）
四边 1px 边框怎么写才不挤内容？
直接给元素加 border: 2px 再缩放，会导致内容区域被挤窄——因为 border 算进宽高了。
正确做法是用伪元素撑出边框区域，再整体缩放：
.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ddd;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
pointer-events: none;
}
关键点：
-
box-sizing: border-box确保伪元素的1px边框不会撑开自身尺寸 - 缩放比例仍用
scale(0.5)，不是scaleX/scaleY分开写 - 必须设
transform-origin: 0 0，否则四边缩放后整体偏移 - 安卓低版本 WebView 对
scaleY(0.5)支持不稳定，可 fallback 到scale(0.5)
容易被忽略的三个真实坑
很多项目上线后才发现问题，往往卡在这三点：
-
overflow: hidden的父容器会裁掉缩放后的伪元素——因为transform不改变布局盒模型，缩放后视觉位置变了，但原始占位还在，容易被裁 - 用户手动缩放页面（Ctrl + 滚轮）时，
transform会被二次缩放，导致边框又糊——它只解决 DPR 问题，不解决用户缩放问题 - 圆角（
border-radius）和阴影（box-shadow）与该方案不兼容，需要单独处理或放弃
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
