最稳解法是::after伪元素配合transform:scaley(0.5)，因dpr导致1px映射为多物理像素而变粗；需设position:relative、height:1px+background、transform-origin:0 100%、pointer-events:none，并兼容ios前缀及dpr动态适配。
直接写 border: 1px 在 iPhone 或高 DPR 安卓机上必然变粗，这不是代码问题，是设备像素比（window.devicePixelRatio）导致的物理渲染结果；真正能稳定落地的解法，是用伪元素 + transform: scaleY(0.5) 主动控制渲染精度。
为什么 border-width: 0.5px 几乎不可用
看似最直觉，但实测中大量机型会忽略或四舍五入：0.5px 在 iOS Safari 13+ 才开始有限支持，Android 4.4–6.0 系统 WebView 直接解析为 0px；0.33px 更是常被当作 0px 或向上取整为 1px。调用 getComputedStyle(el).borderWidth 返回的仍是 "1px" —— 这不是 bug，是渲染引擎对非整数边框宽度的硬性限制。
其他副作用包括：
-
border-radius与0.5px不兼容，圆角处边框会被截断 - 无法通过 CSS 变量动态控制颜色，必须每个地方硬写
border-color - 叠加
box-shadow或filter时易引发渲染异常
::after + transform: scaleY(0.5) 必须写的几个条件
缩放本身不难，错位才是真坑。漏掉任一条件都会导致伪元素飘走、上浮、模糊或拦截点击：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
::after推荐用height: 1px+background-color，别用border-bottom: 1px—— 后者受盒模型干扰，缩放后边缘易糊 -
transform-origin必须显式写成0 100%（左下角），不能只写bottom或left bottom，Safari 某些版本会失效 - 必须加
pointer-events: none，否则安卓 WebView 下可能拦截 touch 事件 - 要加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不稳定 -
content必须是非空字符串（哪怕只是''），且background-color必须显式指定，无法继承父级颜色
四边边框怎么写才不露白、不偏移
单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理，否则坐标系错乱：
-
::after设top: 0; left: 0; right: 0; bottom: 0;，再配width: 200%; height: 200%+transform: scale(0.5) - 必须显式声明
box-sizing: border-box到伪元素上，否则默认content-box会让边框外扩 1px，缩放后四角错位 -
transform-origin改为0 0（左上角），确保锚点稳定，不因内容变化偏移 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始 200% 尺寸计算，坐标系未同步收缩；可改用clip-path: inset(0)替代
不同 DPR 设备要不要动态缩放
硬写 scaleY(0.5) 只覆盖 dpr=2；dpr=3（如 iPhone 14 Pro）时，1px × 0.5 × 3 = 1.5 物理像素，仍不精准。理论上该用媒体查询兜底：
@media (-webkit-min-device-pixel-ratio: 3) {
.border-1px::after {
transform: scaleY(0.333);
}
}
但 Safari 对 scale(0.333) 子像素渲染极不稳定，真机上常出现半像素黑线或闪烁。更稳妥的做法是：dpr≥3 场景统一 fallback 到 box-shadow 或 linear-gradient，尤其当需要圆角或主题色动态切换时。
真正容易被忽略的是：伪元素缩放后若没加 will-change: transform 或 -webkit-backface-visibility: hidden，部分安卓低端机可能出现模糊；而圆角边框必须由父容器用 border-radius + overflow: hidden 裁剪伪元素，不能直接在伪元素上设 border-radius。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
