用CSS如何解决移动端适配的1px细线问题

border: 0.5px 在安卓和iOS 13以下兼容性差，transform: scale()最稳定，通过高DPR屏幕“先放大再缩放”实现精准物理像素对齐，需配合transform-origin、position: relative、box-sizing等细节。

直接用 border: 0.5px 大概率失效——安卓全系不认，iOS 13 以下也不稳定，别赌兼容性。

为什么 transform: scale() 是当前最稳的选择

它不依赖浏览器对小数 px 的支持，而是利用高 DPR 屏幕下“先放大再缩放”的物理像素对齐原理：画一个 2px 宽的伪元素，再用 scale(0.5) 压回 1 物理像素。关键不是“视觉变细”，而是让边框精准落在单个物理像素上。

• transform-origin: 0 0 必须设，否则缩放后位置偏移，边框错位
• 父元素一定要有 position: relative，否则 ::after 会相对 body 定位
• 单边（如下划线）用 scaleY(0.5) 更安全；四边统一用 scale(0.5)，但必须配合 box-sizing: border-box
• 缩放后伪元素可能响应点击事件，加 pointer-events: none 避免遮挡

怎么适配不同 dpr 值（2、3、4）

硬写 scale(0.5) 只对 dpr=2 有效；dpr=3 时得缩到 scale(0.333)，否则边框变虚或消失。纯 CSS 方案靠媒体查询兜底：

/* dpr=2 */@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  .hairline::after { transform: scale(0.5); }}/* dpr=3 */@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {  .hairline::after { transform: scale(0.333); }}

• 别漏掉 min-resolution，它比 -webkit-min-device-pixel-ratio 兼容性更好（尤其安卓 WebView）
• 如果项目已用 JS 获取 window.devicePixelRatio，可动态给根元素加 class（如 data-dpr="3"），再用属性选择器控制，比媒体查询更准
• scale(0.333) 不要写成 scale(1/3)，CSS 不解析表达式

伪元素边框常见翻车点

看似几行 CSS 就能搞定，但线上最多的问题都出在盒模型和定位细节上：

立即学习“前端免费学习笔记（深入）”；

• 没设 box-sizing: border-box → 四边伪元素缩放后溢出父容器，左右/上下多出半像素黑线
• 父容器有 overflow: hidden → 缩放基于原始尺寸计算，scale(0.5) 后伪元素坐标系变小，但绝对定位仍按原宽高占位，容易被裁掉
• 用 border: 1px solid 而非 background-color 画单边 → 边框宽度参与盒模型计算，干扰布局
• 文字容器本身加 transform: scale() → 字体跟着缩小，必须只作用于伪元素

真正难的不是写出第一版代码，而是确认每个使用场景下的 dpr 值、父容器样式、是否带圆角、有没有 overflow —— 这些细节一漏，1px 就会断开、偏移、发虚，而且很难复现。