真正能稳定落地的解法是用伪元素+transform:scaley(0.5)控制渲染精度；因高dpr下1px边框被映射为多物理像素而发虚，缩放可精准压至1物理像素，但需配transform-origin、box-sizing、宽高200%等条件。
直接写 border: 1px 在 iPhone 或高 DPR 安卓机上就是会变粗，这不是 bug，是物理像素映射结果；真正能稳定落地的解法，是用伪元素 + transform: scaleY(0.5) 主动控制渲染精度。
为什么 scaleY(0.5) 能压出真 1 物理像素
高 DPR 设备（如 window.devicePixelRatio === 2）下，border: 1px 实际被渲染成 2 个物理像素，浏览器插值后发虚、加粗。缩放不是“猜”，而是先画一个标准高度的条（比如 height: 1px 或 border-bottom: 1px），再用 transform: scaleY(0.5) 纵向压缩——在 DPR=2 设备上，刚好落到 1 个物理像素高度。
注意：0.5 对应 DPR=2；DPR=3 理论上该用 0.333，但实践中统一用 0.5 更稳：浮点精度、SCSS 编译、浏览器渲染抖动都会让硬写 0.333 反而失真。
::after 下边框必须设 transform-origin: 0 100%
不设 transform-origin 就错位，缩放默认以元素中心为原点，会导致下边框整体上浮、留白，上边框则下移遮内容。
- 下边框必须写
transform-origin: left bottom（或0 100%），确保纵向缩放后仍贴底 - 上边框用
transform-origin: left top - 左边框用
transform-origin: left top+transform: scaleX(0.5) - 右边框用
transform-origin: right top+transform: scaleX(0.5) - 漏掉这个，
scale()就等于白写——你看到的不是细线，是半截飘着的线
四边边框必须配 box-sizing: border-box + width: 200% + height: 200%
单边好处理，四边一起缩放容易出偏移、露白、角落发虚。关键点不在缩放值，而在盒模型和定位基点：
- 伪元素必须设
width: 200%、height: 200%，再加transform: scale(0.5)才能铺满父容器 - 必须紧跟
box-sizing: border-box，否则默认content-box会让边框外扩 1px，缩放后四角错位、右侧/底部溢出 -
transform-origin改为0 0（左上角），确保缩放锚点稳定 - 父容器必须有
position: relative，否则::after会相对视口定位 - 伪元素必须带
content: ""，否则压根不渲染 - 务必加
pointer-events: none，否则伪元素会拦截点击，尤其在安卓 WebView 中
圆角与渐变边框要额外注意单位和裁剪
所有 border-radius、clip-path: inset( round ) 的圆角值必须用 px 单位，禁用 % 或 em，否则缩放时错位。
若父容器有 overflow: hidden，需确保伪元素不被裁掉——因为缩放基于原始 200% 尺寸计算，坐标系未同步收缩。
需要渐变、斜切、波浪等不规则边框？得拆成两层：::before 控制形状，::after 做渐变或遮罩；用 mask-composite: exclude 配合 linear-gradient，只保留 padding 区域显示渐变。
真正难的不是写出某个缩放值，而是判断当前模糊是来自设备 DPR 还是用户主动缩放（比如 Chrome 按 Ctrl+滚轮）；后者会让 transform 被二次缩放，导致方案失效。这时候得靠 border-image + linear-gradient 这类不依赖缩放的方案兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
