用::after伪元素+transform:scaleY(0.5)是最优方案，需配合transform-origin和box-sizing:border-box；因高DPR下1px被渲染为多物理像素，缩放可精准映射至1物理像素，但须按边指定原点且全边框时伪元素需设200%宽高并box-sizing:border-box。
直接结论：用伪元素 +是当前最可控、兼容性好、且不破坏布局的方案，但必须配合和才能避免错位或溢出。
为什么
能“修复”1px？
移动端物理像素密度高（如 iPhone 的
），CSS 中写的
实际被渲染为 2 个物理像素，视觉变粗。缩放的本质是：先画一个标准
高的块（比如伪元素里设
），再用
把它纵向压扁一半——在
设备上，刚好落到 1 个物理像素高度。
这个 “0.5” 不是魔法数字，它对应
；
理论上该用
，但实践中统一用
已覆盖绝大多数场景，且更稳定。
+
下边框写法及常见错误
这是最典型的单边实现，但以下几点极易漏掉：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
必须加在父元素上，否则
无法绝对定位到底部
和
必须匹配，否则缩放后会向上偏移 0.5px
不能替换成
，否则缩放后边框会模糊或虚化
必须加
，否则伪元素会拦截点击事件（尤其列表项、按钮）
四边 1px 边框怎么写才不挤内容？
直接给元素加
再缩放，会导致内容区域被挤窄——因为
算进宽高了。
正确做法是用伪元素撑出边框区域，再整体缩放：
关键点：
确保伪元素的
边框不会撑开自身尺寸
缩放比例仍用
，不是
/
分开写
必须设
，否则四边缩放后整体偏移
安卓低版本 WebView 对
支持不稳定，可 fallback 到
容易被忽略的三个真实坑
很多项目上线后才发现问题，往往卡在这三点：
的父容器会裁掉缩放后的伪元素——因为
不改变布局盒模型，缩放后视觉位置变了，但原始占位还在，容易被裁
用户手动缩放页面（Ctrl + 滚轮）时，
会被二次缩放，导致边框又糊——它只解决 DPR 问题，不解决用户缩放问题
圆角（
）和阴影（
）与该方案不兼容，需要单独处理或放弃
::aftertransform: scaleY(0.5)transform-originbox-sizing: border-boxtransform: scaleY(0.5)dpr=21px1pxheight: 1pxtransform: scaleY(0.5)dpr=2dpr=2dpr=3scaleY(0.333)0.5::afterscaleY(0.5)position: relative::afterbottom: 0transform-origin: left bottomheight: 1pxborder-bottom: 1px solidpointer-events: noneborder: 2pxborder.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-box1pxscale(0.5)scaleXscaleYtransform-origin: 0 0scaleY(0.5)scale(0.5)overflow: hiddentransformtransformborder-radiusbox-shadow