最稳方案是::after+transform:scaleY(0.5)，但须同时满足四条件：父元素position:relative；伪元素用height:1px+background-color而非border；transform-origin显式设为0 100%；加pointer-events:none。
直接结论：用 ::after + transform: scaleY(0.5) 是目前最稳的方案，但必须配齐四个约束条件，漏一条就偏位、露白或点不中。
为什么 border: 0.5px 在多数安卓机上失效
不是语法错，是渲染层不认。iOS 8+ 和部分新版 Chrome 支持 0.5px，但旧版安卓 WebView（尤其 UC、QQ、微信内置浏览器）会直接四舍五入成 1px 或丢弃整条线。更糟的是，0.5px 在 DPR=3 的设备（如 iPhone 14 Pro）上实际渲染为 1.5 物理像素，Safari 仍会插值模糊——这不是“画得不够细”，而是非整数物理像素导致的亚像素混色。
::after + transform: scaleY(0.5) 必须满足的四个硬性条件
只写缩放不管用，下面四点缺一不可：
- 父元素必须设
position: relative，否则伪元素会脱离容器定位到body上 - 伪元素推荐用
height: 1px; background-color: #000，别用border-bottom: 1px—— 后者受盒模型影响，缩放后边缘易虚、位置飘移 -
transform-origin必须显式写成0 100%（即左下角），不能只写bottom；Safari 和部分安卓 WebView 对默认值解析不一致，不写就会上浮露白 - 必须加
pointer-events: none，否则伪元素会拦截点击，列表项、按钮点不中
DPR=3 设备下怎么避免发虚
scaleY(0.5) 在 DPR=3 下等效于 1.5 物理像素，视觉仍粗。解决方案是媒体查询兜底：
立即学习“前端免费学习笔记（深入）”；
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
.thin-line::after {
transform: scaleY(0.333);
}
}
注意：不要用 0.33 或 1/3，CSS 不支持分数写法，必须是小数且三位足够（0.333 ≈ 1/3）。实测 0.333 在 Safari 和 Chrome for iOS 中都能稳定压到 1 物理像素。
四边细边框怎么写才不裁切、不错位
单边线好办，四边一起缩放容易被父容器 overflow: hidden 裁掉，关键在尺寸撑开 + 锚点锁定：
-
::after设top: 0; left: 0; right: 0; bottom: 0;，再配width: 200%; height: 200% - 画
border: 1px solid #000，然后transform: scale(0.5) -
transform-origin改为0 0（左上角），确保缩放锚点固定 - 伪元素必须声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后四角错位 - 若父容器有
overflow: hidden，加will-change: transform提升图层，防裁切
真正难的不是“怎么画”，而是“怎么让每台手机都画对”。DPR 检测、缩放锚点、图层提升、事件穿透——这些细节没对齐，再漂亮的代码上线后也是一条毛边灰线。
