直接写border: 1px在高DPR设备上必然变粗，因1 CSS像素被映射为2～3物理像素；可靠解法是::after伪元素+height: 1px+background+transform: scaleY(0.5)+transform-origin: 0 100%+pointer-events: none。
直接写 border: 1px 在 iPhone 或多数安卓机上必然变粗——这不是你 CSS 写错了，而是浏览器按设备像素比（DPR）把 1 个 CSS 像素渲染成了 2～3 个物理像素。真要实现「视觉上刚好 1 物理像素」的边框，必须绕过原生 border 对盒模型的侵入和渲染规则。
为什么不能用 border-width: 0.5px
绝大多数浏览器不支持非整数 border-width：border-width: 0.5px 在 iOS Safari 旧版、多数安卓 WebView 中会被忽略或向上取整为 1px；W3C 规范未强制要求支持小数像素。更麻烦的是，DPR=3 设备理论上需要 0.333px，根本不可控。即使某版本能勉强渲染，颜色精度、圆角衔接、阴影叠加都会不稳定。
::after + transform: scaleY(0.5) 实现底部单边 1px
这是目前最轻量、零 JS、兼容性最稳的解法，但细节极易出错：
- 父元素必须设
position: relative，否则伪元素会脱离上下文定位到body - 伪元素用
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
