根本原因是dpr导致1px css像素映射为2或3物理像素，浏览器直接拉伸渲染；最稳解法是::after+height:1px+background+scaley(0.5)+transform-origin:0 100%+pointer-events:none。
为什么 border: 1px 在高清屏上看起来像 2px 或 3px
这不是 CSS 写错了，而是 window.devicePixelRatio（DPR）在起作用：iPhone、华为 Mate 系列、三星 S 系列等设备 DPR 多为 2 或 3，意味着 1 个 CSS 像素对应 2 或 3 个物理像素。浏览器把 border: 1px 拉伸渲染成整数个物理像素，且不做抗锯齿降采样，结果就是边框“发胖”、文字发虚、图标模糊。
::after + transform: scaleY(0.5) 是目前最稳的单边方案
它绕开了浏览器对 0.5px 的不可靠支持，用缩放主动控制物理像素精度：
- 父元素必须设
position: relative，否则::after会脱离定位上下文 -
::after用height: 1px+background-color，别用border-bottom: 1px——后者缩放后边缘易糊、受盒模型干扰 -
transform-origin必须显式写成0 100%（左下角），Safari 某些版本只写bottom会失效 - 务必加
pointer-events: none，否则安卓 WebView 下伪元素可能拦截点击 - iOS 12–15 对无前缀属性支持不稳定，
-webkit-transform和-webkit-transform-origin必须补全
四边边框怎么避免缩放错位和露白
单边缩放简单，四边一起缩放容易偏移或边缘溢出，关键在锚点与盒模型控制：
- 伪元素设
top: 0; left: 0; right: 0; bottom: 0;，再用width: 200%; height: 200%+transform: scale(0.5) -
transform-origin改为0 0（左上角），确保缩放不随内容浮动 - 必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后四角飘移 - 父容器若有
overflow: hidden，缩放后的伪元素可能被裁掉——因为缩放基于原始 200% 尺寸计算，坐标系未同步收缩
border-width: 0.5px 为什么不能直接用
看似最直觉，实则落地风险最高：
- iOS Safari 13+ 才开始有限支持，多数安卓 WebView（尤其 Android 4.x、UC、QQ 浏览器）直接四舍五入为
1px或忽略 -
getComputedStyle(el).borderWidth永远返回"1px"，无法通过 JS 准确判断是否生效 - 媒体查询兜底如
@media (-webkit-min-device-pixel-ratio: 2) { * { border-width: 0.5px; } }会全局污染，且无法覆盖所有机型 - 真要运行时检测，得创建测试
div、写0.5px边框、检查offsetHeight === 1，再动态加 class——维护成本高，上线后极易漏测
真正容易被忽略的是：::after 的 content 必须是非空字符串（哪怕只是 ' '），且 background-color 无法继承，必须显式指定；圆角边框用此法会失真，此时应改用 linear-gradient 或 SVG 背景模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
