最稳解法是::after伪元素+transform:scaley(0.5)，因dpr≥2时1px映射为2+物理像素而变粗；需父元素position:relative、transform-origin:0 100%防偏位，伪元素用height:1px+background-color并加pointer-events:none。
直接用 border: 1px 在高 DPR 设备（如 iPhone、部分安卓机）上必然变粗，这不是写法错误，而是浏览器按物理像素渲染的自然结果；想视觉上“真 1px”又不挤占内容区，必须绕过 border 对盒模型的侵入——伪元素 + transform: scaleY(0.5) 是目前最轻量、零 JS、兼容稳定的解法。
为什么不能直接改 border-width 为 0.5px
绝大多数浏览器不支持非整数 border-width：border-width: 0.5px 在 Safari 旧版、多数安卓 WebView 中会被忽略或向上取整为 1px；W3C 规范未强制要求支持小数像素，即使某版本能渲染，颜色精度、圆角衔接、阴影叠加也极不稳定。更关键的是，dpr=3 设备需要 0.333px，这完全不可控。
::after + scaleY(0.5) 实现底部单边 1px 的最小可靠写法
这个组合最容易出错，核心不在缩放值，而在定位基点和盒模型约束：
- 父元素必须设
position: relative，否则::after会脱离上下文定位到body -
::after用height: 1px+background-color，别用border-bottom: 1px—— 后者缩放后边缘易发虚 -
transform-origin必须显式设为left bottom（或0 100%），否则默认缩放中心在中点，下边框会上浮露白 - 必须加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不全 - 加
pointer-events: none，防止伪元素遮挡点击区域
四边都加 1px 边框时，box-sizing 为什么不能省
如果伪元素用 top: 0; left: 0; right: 0; bottom: 0; 并画 border: 1px solid，再套 transform: scale(0.5)，默认 box-sizing: content-box 会让边框外扩 1px，缩放后四角错位、右侧/底部溢出，甚至出现半像素黑线：
- 伪元素必须设
width: 200%; height: 200%，再配合transform: scale(0.5)才能铺满父容器 - 必须紧跟
box-sizing: border-box，让宽高包含边框，避免尺寸计算漂移 -
transform-origin改为0 0（左上角），确保缩放锚点稳定，不因内容变化偏移 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始 200% 尺寸计算，坐标系未同步收缩
真正难的不是写出某个缩放值，而是判断当前模糊是来自设备 DPR 还是用户主动缩放（比如 Chrome 按 Ctrl+滚轮）；后者会让 transform 被二次缩放，导致方案失效。这时候得靠 border-image + linear-gradient 这类不依赖缩放的方案兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
