伪元素+transform缩放是最稳定方案，因border-width: 0.5px在安卓webview中常被四舍五入为0；用::after+height:1px+scaley(0.5)+transform-origin可精准实现1物理像素边框。
移动端1px边框在Retina屏上实际渲染为2px甚至3px，本质是CSS像素与设备物理像素不匹配。直接写border: 1px在dpr≥2的设备上会变粗，伪元素+transform缩放是最稳定、无需额外资源、兼容性好（iOS/Android均生效）的方案。
为什么用:after + scaleY(0.5)而不是border-width: 0.5px
border-width: 0.5px在iOS Safari中能正常显示，但在多数安卓WebView（尤其Android 4.x–8.x）里会被四舍五入为0px，直接消失。而伪元素方案绕过浏览器对border-width的解析限制，靠缩放视觉还原1物理像素——只要height: 1px + transform: scaleY(0.5)，就能让最终渲染高度≈0.5个CSS像素，在dpr=2时正好对应1个物理像素。
- 必须用
:before或:after，不能用div子元素：避免DOM污染和布局干扰 -
transform-origin要配对设置：下边框用left bottom，上边框用left top，否则缩放后位置偏移 - 安卓低版本Webview对
transform支持弱，建议加-webkit-transform前缀
.hairline-bottom单边框的最小可用写法
只加底部1px线，最简可靠写法：
.hairline-bottom {
position: relative;
}
.hairline-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #e5e5e5;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
-
background-color比border-bottom更可控：避免border-style在缩放后出现毛边 - 不要设
border-bottom: 1px solid再缩放：某些Android机型对border缩放渲染异常 - 若父容器有
padding，伪元素默认从content-box起算，需手动调整bottom值抵消
全边框（四边）要注意box-sizing和尺寸翻倍
四边都加线时，伪元素必须覆盖整个父盒区域，且边框不能溢出——否则缩放后边缘多出1px白边或错位。
- 伪元素宽高设为
200%，再用scale(0.5)缩回原尺寸，确保1px边框精准贴合 - 必须加
box-sizing: border-box：否则border: 1px会让伪元素总尺寸变成200% + 2px，缩放后仍溢出 -
transform-origin统一设为left top，配合top: 0; left: 0定位 - 圆角需同步放大：如父元素
border-radius: 4px，伪元素应设border-radius: 8px（dpr=2时）
容易被忽略的是：当父元素本身有overflow: hidden，而伪元素超出父盒范围（比如未设box-sizing），缩放后的边框可能被裁剪——这种问题只在真机调试时暴露，开发工具模拟器常显示正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
