不能靠 border: 1px 硬写；需用 ::after + transform: scaleY(0.5)、box-shadow 或媒体查询 + 0.5px 等方案适配高 DPR 设备，且混用时须注意样式隔离与真机验证。
border: 1px 硬写**。在 dpr ≥ 2 的设备上，它必然渲染为 2px 或 3px 物理像素——这不是 bug，是浏览器按设备像素比（devicePixelRatio）做映射的正常行为。真正有效的解法，得绕过这个映射逻辑。
用 ::after + transform: scaleY(0.5) 模拟单边 1px
这是目前最常用、兼容性最好、也最容易出错的方式。核心是「画 2px，再压扁成 1px 视觉高度」，只作用于伪元素，不干扰内容。
- 必须给伪元素设
content: ""、position: absolute和明确的width/height（比如下边框就设bottom: 0; height: 2px） -
transform-origin要设对：下边框用0 0（左上角），上边框用0 100%，否则缩放后会偏移 - 父容器不能有
overflow: hidden，否则压扁后的伪元素可能被裁掉 - 别对整个元素用
scale，否则文字和图标也会被压缩变形
示例（下边框）：
.border-bottom::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 2px;
background: #ccc;
transform: scaleY(0.5);
transform-origin: 0 0;
}
用 box-shadow 实现无缩放、不重排的 1px 分割线
适合列表项、表单输入框下划线这类单侧轻量分隔场景。原理是阴影本身按物理像素渲染，box-shadow: 0 1px 0 #000 在 dpr=2 设备上就是真·1 物理像素。
- 只支持单向：正数
y值是下边，负数是上边；不支持左右或圆角边框 - 颜色在深色背景上容易发虚（抗锯齿导致），浅灰系更稳妥
- 不能和真实
box-shadow共存，得合并写，比如box-shadow: 0 1px 0 #eee, 0 2px 4px rgba(0,0,0,.1) - 不触发重排重绘，性能比伪元素方案略优
示例：
立即学习“前端免费学习笔记（深入）”；
.list-item {
box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
用 @media + border-width: 0.5px 的前提与限制
iOS 8+ 支持 0.5px，但 Android 大部分机型（尤其旧版 WebView）会直接忽略或渲染为 0px。所以不能无条件写，得先探测。
- 探测脚本必须内联在
<body>开头，或包装在DOMContentLoaded里，否则 DOM 还没 ready 就执行会失败 - 探测逻辑是创建临时
div，设border: .5px solid transparent，检查offsetHeight === 1 - 成功后给
<html>加 class，再用 CSS 覆盖：.hairlines .border { border-width: 0.5px; } - 别指望
@media (-webkit-min-device-pixel-ratio: 3)里写0.333px，实测多数设备不认小数点后三位
为什么 border-image 方案维护成本高
它能真正控制物理像素，但代价是图像资源管理。你需要为 dpr=2/3/4 分别准备 1px 高的 base64 图片，并确保 border-image-slice: 1（注意不是 1px），且 border-width 必须显式设为 1px 否则 fallback 到普通 border。
- 图像是横向平铺的，所以必须是 1px 高、宽度任意（推荐 2px 宽，前 1px 透明，后 1px 实色）
- 修改颜色 = 替换图片 = 重新生成 base64 = 更新所有 dpr 版本，不适合频繁调色的项目
- 如果忘记写
-webkit-border-image，iOS Safari 会直接失效
示例（底部边框）：
.border-bottom-1px {
border-width: 0 0 1px 0;
border-image: url("data:image/png;base64,iVBORw...") 0 0 1 0 stretch;
-webkit-border-image: url("data:image/png;base64,iVBORw...") 0 0 1 0 stretch;
}
真正难的不是选哪种方案，而是**同一项目里混用时的样式隔离**——比如一个组件用了伪元素，另一个用了 box-shadow，它们的 z-index、点击区域、圆角处理、动画表现全都不一致。上线前务必在真机 dpr=2/3 下逐个验证。 
