直接写 border: 0.5px 在安卓上失效，因多数 webview（如微信、qq、uc）不支持而直接丢弃声明；::after + transform: scaley() 是兼容性最佳方案，需父元素 position: relative、伪元素 height: 1px + background-color、transform-origin 显式设为 bottom/top、按 dpr 精确缩放（如 dpr=3 用 0.333333），并补充 min-resolution 媒体查询以覆盖 firefox android。
为什么直接写 border: 0.5px 在安卓上会失效
因为 Android 大部分 WebView（包括微信、QQ、UC 内置浏览器）根本不支持 0.5px，解析时直接丢弃整条声明，结果就是没边框。iOS Safari 虽然从 10+ 开始支持，但仅限于原生 WebKit 渲染路径——一旦走 Hybrid 容器或某些定制内核，照样 fallback。更麻烦的是，Chrome Desktop 开发者工具里能渲染出来，真机调试才暴露问题，容易误判。
用 ::after + transform: scaleY() 实现物理像素级边框
这是目前兼容性最稳、可控性最强的方案，核心是把边框“画”在伪元素上，再按设备像素比（DPR）缩放它。
- 父元素必须设
position: relative -
::after的height固定为1px（不是 2px 再缩放），width: 100%，bottom: 0，left: 0 -
transform-origin必须设为bottom（下边框）或top（上边框），否则缩放后位置漂移 - DPR=2 时用
transform: scaleY(0.5)；DPR=3 时必须用0.333333，不能四舍五入成0.33，否则安卓 WebView 渲染模糊 - 媒体查询要同时覆盖
(-webkit-min-device-pixel-ratio: 2)和(min-resolution: 192dpi)，后者兼容 Firefox Android
用 border-image + linear-gradient 绕过 DPR 映射
这个方案不依赖缩放，而是用渐变“画”出真正占 1 物理像素的线，适合单边边框（如只加 border-bottom）。
- 必须写
border: 1px solid transparent，否则border-image不生效 -
border-image的slice值必须是1，例如：border-image: linear-gradient(to bottom, #000, #000) 1 - 多边或圆角场景不适用，得额外叠加伪元素处理
- 老版 UC 或 QQ 浏览器可能 fallback 到默认
1px边框，需加降级样式
哪些细节最容易被忽略
一是 transform-origin 没设对，导致缩放后边框错位；二是媒体查询漏了 min-resolution，Firefox Android 下失效；三是用 rem 或 vw 设 border-width 来“响应式”，结果虚线节距在缩放后失衡——虚线本质是离散图形，不能连续缩放。真正需要适配不同屏幕时，应该用媒体查询分段控制，而不是靠单位自动过渡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
