移动端1px边框实际显示更粗是因设备像素比导致等比例拉伸且无降采样；0.5px不被广泛支持，主流方案是::after+transform:scaley(0.5)，需注意定位、盒模型、transform-origin、pointer-events及兼容性处理。
移动端写 border: 1px 看起来像 2px 或更粗，不是你代码错了，是设备像素比（window.devicePixelRatio）在起作用——浏览器把 1 个 CSS 像素映射成多个物理像素，边框被等比例拉伸，且不做降采样。
为什么直接写 border-width: 0.5px 不行
绝大多数浏览器不支持非整数 px 边框宽度：0.5px 在 iOS Safari 13+ 才开始有限支持，安卓 WebView（尤其 Android 4.x、UC、QQ 浏览器）普遍四舍五入为 1px 或直接忽略；0.33px 更是常被解析为 0px。实测中 getComputedStyle(el).borderWidth 仍返回 "1px"，这不是 bug，是渲染引擎的硬性限制。
::after + transform: scaleY(0.5) 实现底部单边 1px
这是最轻量、复用性最高的下边框方案，但关键不在缩放值本身，而在定位锚点和盒模型控制：
- 父元素必须设
position: relative，否则::after的bottom: 0会相对于body定位 -
::after推荐用height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后边缘易模糊 -
transform-origin必须显式设为left bottom（或0 100%），否则缩放中心默认在中点，边框会上浮露白 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截点击事件 - iOS 12–15 对无前缀
transform支持不稳定，要补-webkit-transform和-webkit-transform-origin
四边都加 1px 边框时怎么防错位
单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理，否则干扰布局：
- 伪元素设
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% 尺寸计算，坐标系未同步收缩
真正容易被忽略的是：::after 的 content 必须是非空字符串（哪怕只是 ''），且 background-color 必须显式指定，无法自动继承父级颜色；圆角边框用此法会失真，此时应改用 background: linear-gradient 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
