border: 0.5px 不生效是因为高 dpr 设备上浏览器将 0.5px 四舍五入为 1px；稳定方案是用伪元素 + scaley(0.5) + transform-origin: bottom 模拟视觉 0.5px 边框。
为什么 border: 0.5px 在 Retina 屏上不生效
直接写 border: 0.5px solid #ccc 大部分 iOS Safari 和 Android Chrome 会四舍五入成 1px，因为 CSS 像素单位在高 DPR 设备上仍按逻辑像素解析，0.5px 超出渲染引擎的最小可绘制单位（通常为 1 物理像素，即 DPR=2 时逻辑像素=0.5 物理像素，但浏览器不保证支持 sub-pixel 边框）。
真正能稳定输出「视觉上接近 0.5px」的方案，得绕过 border，改用伪元素 + transform: scaleY(0.5) 或 scale(1, 0.5) 控制高度，再配合 transform-origin 对齐位置。
用 ::after 画一条「视觉 0.5px」下边框
这是最常用、兼容性好（iOS 8+ / Android 4.4+）、无 JS 依赖的方案。核心是：伪元素设 height: 1px，再纵向压缩一半，并锚定到底部。
.hairline-bottom {
position: relative;
}
.hairline-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: bottom;
/* 防止模糊，强制启用硬件加速 */
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: bottom;
}
- 必须加
position: relative到父元素，否则absolute伪元素定位失效 -
transform-origin: bottom确保缩放后线条紧贴容器底边，而不是向下偏移 - iOS 旧版 Safari（≤9）对
transform缩放 1px 元素有时有抗锯齿问题，可加-webkit-backface-visibility: hidden修复 - 如果父元素有
border-box盒模型且设置了padding，伪元素会撑开内容区——此时应把伪元素放在子容器上，或用box-sizing: border-box统一控制
适配不同 DPR 的自动缩放方案
硬写 scaleY(0.5) 只适用于 DPR=2；DPR=3（如 iPhone 12 Pro）下 1px 物理像素对应逻辑像素约 0.33px，这时需要动态缩放比例。纯 CSS 方案有限，推荐用 @media 按 device-pixel-ratio 区分：
@media (-webkit-min-device-pixel-ratio: 2) {
.hairline::after {
transform: scaleY(0.5);
}
}
@media (-webkit-min-device-pixel-ratio: 3) {
.hairline::after {
transform: scaleY(0.33);
}
}
-
-webkit-min-device-pixel-ratio是目前最稳妥的媒体查询方式，iOS/Android 主流浏览器均支持 - 不要用
resolution媒体特性（如min-resolution: 2dppx），部分安卓 WebView 不识别 - 注意：Safari 对
scaleY(0.33)渲染可能略虚，若对质感要求极高，DPR=3 场景建议改用box-shadow模拟单像素线（如box-shadow: 0 1px 0 #ddd），更稳定
伪元素边框和真实 border 的叠加冲突
当元素本身已有 border-bottom，又叠加伪元素下边框，会出现双线或错位。这不是 bug，而是盒模型叠加的自然结果。
- 务必先清除原
border：border-bottom: none - 若需保留原边框颜色/样式做 fallback，可用
@supports (border: 0.5px)尝试渐进增强（但实际支持率极低，不建议依赖） - 伪元素默认 z-index 低于内容，若内部有
background或overflow: hidden，可能遮住伪元素——此时加z-index: 1并确保父元素position有效 - 圆角容器（
border-radius）里用伪元素画边框，缩放后圆角会变形；此时应改用linear-gradient背景图模拟边框，或接受轻微失真
实际项目中，最易被忽略的是 transform-origin 的取值和父容器的 position 上下文。很多「线没对齐」「线变粗了」的问题，根源都在这两处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
