真正实现1物理像素线的关键在于dpr适配、transform-origin锚点对齐、box-sizing控制和pointer-events阻断，缺一不可。
直接用 transform: scaleY(0.5) 配合伪元素能实现视觉上真正的 1 物理像素线，但不加约束会偏位、发虚、甚至消失——核心不在“缩放”，而在定位锚点、盒模型和 dpr 适配。
为什么 border: 1px 在手机上看起来像 2px
因为 CSS 的 1px 是逻辑像素，而 iPhone 8、华为 P40 等设备的 window.devicePixelRatio === 2，浏览器把 1 个逻辑像素映射到 2×2 个物理像素；border: 1px 就实实在在画了 2 像素宽，还带抗锯齿，结果就是粗、虚、发灰。
写 border-width: 0.5px 没用：iOS Safari 13+ 才开始有限支持，安卓 WebView（尤其 UC、QQ 浏览器）直接四舍五入成 0px 或 1px，getComputedStyle(el).borderWidth 返回的仍是 "1px"。
::after + scaleY(0.5) 实现下边框时总错位
错位不是缩放惹的祸，是 transform-origin 和父容器定位没对齐：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
::after要写bottom: 0+transform-origin: 0 100%（或left bottom），让缩放从底部向上压；写成bottom或center在旧版 Safari 里会失效 - 别用
border-bottom: 1px，改用height: 2px+background-color，再transform: scaleY(0.5)，避免盒模型插值干扰 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截点击
示例：
.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 100%;
pointer-events: none;
}
四边边框用 scale(0.5) 后角落露白或溢出
这是 box-sizing 没设导致的典型问题：
- 伪元素若设
top: 0; left: 0; right: 0; bottom: 0;并画border: 1px solid，默认box-sizing: content-box→ 实际尺寸 = 内容区 + 左右各 1px + 上下各 1px - 再
transform: scale(0.5)，缩放中心在中点，四角必然错位、露白、或超出父容器半像素 - 正确做法：伪元素设
width: 200%; height: 200%，立刻跟box-sizing: border-box，再transform: scale(0.5)，锚点用transform-origin: 0 0 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁掉——因缩放基于原始 200% 尺寸计算
不同 dpr 设备下硬写 scaleY(0.5) 依然偏粗
scaleY(0.5) 只保 dpr=2 精准；dpr=3（如 iPhone 12/13）下会渲染成 1.5px，还是粗：
- 必须用 JS 获取
window.devicePixelRatio，算出缩放比1 / dpr（如 dpr=3 →scaleY(0.333)） - 推荐方式：JS 注入
data-dpr="3"到，再用 CSS 自定义属性配合calc()动态控制，比如transform: scaleY(calc(1 / var(--dpr))) - Safari 对 sub-pixel 缩放支持不稳定，dpr=3 时建议 fallback 到
box-shadow或linear-gradient方案 - Android UC、QQ 浏览器对
transform-origin解析有偏差，必须加-webkit-transform-origin前缀
真正稳定的 1px 不是靠一个技巧，而是把 dpr 检测、transform-origin 锚点、box-sizing 控制、pointer-events 阻断这四点全卡死——漏掉任意一个，上线后都可能在某个机型上断开或发虚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
