移动端1px边框显示变粗是因设备像素比（dpr）导致css像素被等比拉伸；0.5px等非整数宽度兼容性差，ios safari 13+才有限支持，安卓普遍四舍五入为1px；::after+scaley(0.5)需设position:relative、transform-origin:0 100%、box-sizing:border-box、pointer-events:none，并确保content非空、background-color显式设置。
移动端写 border: 1px 看起来像 2px 或 3px，不是你代码错了，是设备像素比（dpr）在起作用——浏览器把 1 个 CSS 像素映射成多个物理像素，边框被等比例拉伸，且不做降采样。
为什么不能直接写 border-width: 0.5px 或 0.33px
绝大多数浏览器不支持非整数 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) 怎么写才不偏位
缩放本身简单，错位才是高频翻车点。关键不在 scaleY(0.5)，而在定位锚点与盒模型控制：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
transform-origin必须显式写成0 100%（左下角），才能让缩放从底部向上压；写成bottom在部分 Safari 版本里会失效 - 伪元素推荐用
height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后内容区易被挤或边缘模糊 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截点击事件 - iOS 12–15 对无前缀
transform支持不稳定，要补-webkit-transform和-webkit-transform-origin
四边边框用 scale(0.5) 时 box-sizing 必须设为 border-box
如果伪元素设了 top: 0; left: 0; right: 0; bottom: 0; 并画 border: 1px solid，再 scale(0.5)，默认 box-sizing: content-box 会让 border 外扩 1px，缩放后位置偏移、四角露白或溢出：
- 伪元素尺寸设为
width: 200%; height: 200%，画border: 1px solid #000，再整体transform: scale(0.5) - 必须加
box-sizing: border-box到伪元素上，确保width/height包含 border -
transform-origin改为0 0（左上角），避免缩放后右/下边缘错位或被overflow: hidden裁掉 - 若父容器有
overflow: hidden，缩放后的伪元素可能被裁——因为缩放基于原始尺寸计算，可加will-change: transform提升图层防模糊
真正容易被忽略的是：伪元素的 content 必须是非空字符串（哪怕只是 ' '），且 background-color 必须显式指定——它无法自动继承父级颜色；另外，transform-origin 写成 bottom 而非 0 100%，在部分 Safari 版本里会完全失效。这些细节不跑真机根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
