最稳妥方案是伪元素+transform: scaleY(0.5)，因高DPR屏幕将1px映射为多物理像素致边框发虚，而0.5px不被多数浏览器支持；须设position: relative、transform-origin: 0 0，并用height: 2px缩放还原视觉1px。
直接用 transform: scaleY(0.5) 配合伪元素是最稳妥、兼容性最好、开发成本最低的方案，但必须控制好定位锚点、缩放目标和父容器约束，否则边框会偏移、被裁或在安卓低版本失效。
为什么 border: 1px 在手机上看起来像 2px？
因为高 DPR 屏幕（如 iPhone 的 dpr=2 或华为部分机型 dpr=3）会把 1 CSS 像素映射到多个物理像素，浏览器再插值渲染，导致边框发虚变粗；border: 0.5px 在多数安卓 WebView 和旧版 iOS 中根本不识别，写了也当没写。
真正起作用的是「先画 2px，再压回视觉 1px」——不是靠浏览器支持小数边框，而是靠缩放让 2px 边框精准落在 1 个物理像素上。
::after 伪元素 + transform: scaleY(0.5) 怎么写才不偏移？
关键不在缩放本身，而在缩放的原点和定位上下文：
立即学习“前端免费学习笔记（深入）”；
- 父元素必须设
position: relative，否则::after的bottom: 0会相对于 body 定位 -
transform-origin: 0 0必须显式写，否则默认以中心为锚点，缩放后边框整体上浮或右移 -
height: 2px是基准值，不是 1px；缩放的是这个 2px 元素，不是内容 - 安卓部分低版本（如 Android 4.4 WebView）对
scaleY支持不稳定，可 fallback 为transform: scale(0.5)（同时缩 X/Y）
示例（下边框）：
.line-bottom {
position: relative;
}
.line-bottom::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: 0 0;
}
四边都加 1px 边框时，scale(0.5) 会把内容压扁吗？
不会压扁内容，但会干扰盒模型——如果直接给元素加 border: 2px 再缩放，border 仍计入宽高，内容区实际变窄。
正确做法是：只让伪元素承担边框职责，内容区域完全隔离：
- 用
::before画一个 200% × 200% 的伪元素，设border: 1px - 再用
transform: scale(0.5)缩回原尺寸 - 必须加
box-sizing: border-box，否则缩放后边框位置飘移 -
transform-origin改为0 0，确保缩放锚点稳定在左上角
更稳妥的写法（四边）：
.border-1px {
position: relative;
}
.border-1px::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid #ddd;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
}
哪些地方最容易踩坑？
这个问题的复杂点不在“怎么写”，而在于“什么时候不该写”：
- 父容器设了
overflow: hidden——::after缩放后可能被裁掉，尤其scaleY(0.5)从底部向上缩时 - 需要圆角边框 ——
transform缩放会扭曲圆角弧度，此时应改用box-shadow或border-image - 要适配 dpr=3 设备（如三星 S23、华为 Mate 50）——硬写
scaleY(0.5)会导致边框过细甚至消失，得配合媒体查询动态切比例 - 伪元素没写
content: ""——很多开发者漏掉这行，结果伪元素根本没渲染
真正容易被忽略的是：缩放只是视觉矫正，它不改变设备像素比的本质。一旦交互触发重绘（比如键盘弹出、滚动），某些低端安卓机可能出现闪动或错位——这时得加 will-change: transform 或用 translateZ(0) 触发合成层。
