安卓 webview 对 0.5px 解析不一致，因旧版 uc、qq 及 android 4.4–6.0 系统 webview 直接忽略或向上取整；dpr=3 时 0.5px 映射为 1.5 物理像素，常进位成 2px 仍显粗；伪元素 + scaley(0.5) 更稳，需设 position: relative、transform-origin: 0 100%、content: ""、background-color 显式声明及 pointer-events: none。
安卓 WebView 对 0.5px 的解析行为不一致
不是所有安卓机型都支持 border-width: 0.5px，根本原因是底层 WebView（尤其是旧版 UC、QQ、Android 4.4 内置浏览器）在解析 CSS 时直接忽略小数边框值，或强制向上取整为 1px。即使 window.devicePixelRatio === 2，也不能保证该设备的渲染引擎识别 0.5px。
0.5px 在不同 DPR 下实际物理像素不可控
0.5px 是个静态值，但它在不同设备上对应的物理像素数会漂移：
- DPR=2 时，
0.5px理论对应 1 物理像素 —— 部分 iOS 可渲染成功 - DPR=3 时，
0.5px实际映射为 1.5 物理像素，多数安卓 WebView 无法亚像素渲染，直接进位成 2 物理像素（即视觉上仍是“粗线”） - 圆角场景下，
border-radius与0.5px组合常出现模糊或锯齿，因抗锯齿策略失效
伪元素 + transform: scaleY(0.5) 为什么更稳
它绕开了浏览器对边框宽度的解析逻辑，改用渲染后缩放控制最终像素输出：
- 伪元素用
height: 1px+background-color，规避盒模型干扰 -
transform-origin: left bottom（或0 100%）确保缩放锚点稳定，不漂移 - 必须设父元素
position: relative，否则::after定位会脱离上下文 - 加
pointer-events: none，防止某些安卓 WebView 下伪元素拦截点击
真正容易被忽略的细节
很多人写了 scaleY(0.5) 却发现线偏了、断了、或者干脆看不见——问题往往不在缩放本身：
-
content必须是非空字符串（如content: ""），空值会导致伪元素不渲染 -
background-color不能靠继承，必须显式声明，否则是透明的 - 父容器若设了
overflow: hidden，缩放后的伪元素可能被裁掉（因缩放基于原始尺寸计算） - 需要四边边框时，不能简单套用单边写法：得用
width: 200%+height: 200%+transform: scale(0.5)+transform-origin: 0 0，再配box-sizing: border-box
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
