伪元素+transform:scale()是实现Retina屏细边框最稳定方案，因0.5px等小数border在多端不兼容且DPR=3时仍偏粗；需配合transform-origin防偏移，并用媒体查询按DPR动态缩放。
在视网膜屏（DPR ≥ 2）上，border: 1px 实际渲染为 2px 或 3px 物理像素，视觉上明显变粗。用 transform: scale() 缩放伪元素是最稳定、兼容性最好的方案，不需要 JS、不依赖 viewport 修改，也不受限于 border-image 图片资源。
为什么不能直接写 0.5px？
虽然部分 Safari 和 Chrome 支持 border-width: 0.5px，但 Android WebView、旧版 iOS、微信内置浏览器等仍会向上取整为 1px；更关键的是，0.5px 在 DPR=3 设备（如 iPhone 14 Pro）上又不够细——它实际是 1.5px 物理像素，依然偏粗。所以硬写小数 px 是靠不住的。
伪元素 + scale 的标准写法
核心思路：创建一个 1px 高/宽的伪元素，再用 transform: scale() 沿对应轴向压缩，同时用 transform-origin 控制缩放锚点，避免位移错位。
常见错误现象：边框位置偏移、上下/左右不对齐、圆角被拉伸变形、缩放后模糊。
立即学习“前端免费学习笔记（深入）”；
- 单边下边框（推荐）：
div { position: relative; } div::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #ccc; transform: scaleY(0.5); transform-origin: bottom; } - 四边边框（需 box-sizing）：
div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #ccc; box-sizing: border-box; transform: scale(0.5); transform-origin: top left; } - 注意：必须设
transform-origin，否则缩放中心默认是元素中心，会导致伪元素整体上移或左偏 - 如果父容器有
padding或border，伪元素的top/left/right/bottom值要同步调整，否则出现缝隙
根据 DPR 动态缩放才是真·适配
固定写死 scaleY(0.5) 只适用于 DPR=2；DPR=3 时应缩为 scaleY(0.333)。纯 CSS 无法读取 DPR，所以得靠 JS 注入 class 或媒体查询兜底。
最简实践：
@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.333);
}
}
- WebKit 媒体查询能覆盖绝大多数移动端，但不支持 Firefox for Android —— 这类设备极少，可忽略
- 如果项目已用 postcss-pxtorem 或类似工具，建议把缩放逻辑抽成 mixin，避免重复写 media 查询
- 不要用
scale(0.5, 0.5)同时缩放宽高：当元素本身有圆角或阴影时，会破坏比例关系
真正容易被忽略的是：缩放后的伪元素仍占原始布局空间，但视觉上“变细”了，所以如果相邻元素依赖它的边界做对齐，可能需要额外微调 margin 或使用 pointer-events: none 避免遮挡交互。这不是 bug，是 scale 的固有行为。
