因dpr>1导致1px css像素被渲染为多个物理像素而变粗；伪元素+scaley(0.5)+transform-origin可精准控制细边框，避免缩放主体内容、圆角变形等问题。
为什么 border: 1px 在 iPhone 或安卓高 DPR 屏上看起来像 2px？
因为设备像素比（DPR）大于 1，比如 iPhone 13 的 DPR 是 3，浏览器把 1px CSS 像素渲染成 3 个物理像素，视觉上就变粗了。这不是 bug，是浏览器按规范对「逻辑像素」的正常映射——但 UI 设计师要的是「视觉上真正细如发丝的边框」。
用 transform: scale(0.5) 缩放整个元素会出什么问题？
直接对带 border 的元素加 transform: scale(0.5) 确实能让边框变细，但副作用明显：
- 文字、内边距、子元素全部被等比缩小，布局错乱
- 缩放后可能触发 subpixel 渲染，边缘发虚或出现模糊色边
- 如果元素有
border-radius，圆角也会被压缩变形 - 父容器若设了
overflow: hidden，缩放后内容可能被意外裁剪
为什么伪元素 + transform: scaleY(0.5) 更靠谱？
只让伪元素承担边框职责，主体内容完全不受影响。关键在「单向缩放」+ 「定位覆盖」：
- 用
::after画一条 1px 高的横线，再用transform: scaleY(0.5)压扁它，物理像素数减半 - 必须配合
transform-origin: top（或bottom），否则缩放中心在中间，线条会偏移 - 需设置
content: ""、position: absolute和精确的top/left值，让它严丝合缝贴住目标边 - DPR 判断建议用
@media (-webkit-min-device-pixel-ratio: 2)，比 JS 动态注入更稳定
.border-bottom {
position: relative;
}
.border-bottom::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: bottom;
}
@media (-webkit-min-device-pixel-ratio: 2) {
.border-bottom::after {
transform: scaleY(0.5);
}
}
还有哪些边界情况必须手动处理？
伪元素方案不是银弹，这些细节不注意就会露馅：
- 圆角容器里加伪边框：得同步给
::after设border-radius，且值要按缩放比例反向调整（比如原border-radius: 4px，缩放 0.5 后得设border-radius: 8px） - 滚动区域中固定边框：伪元素若用
position: absolute，滚动时可能脱离锚点，此时改用position: sticky或 JS 监听scroll重定位 - 深色模式下边框颜色：别只写
#ddd，用color-scheme: light dark配合CSS 变量或@media (prefers-color-scheme: dark) - React/Vue 组件复用时：避免全局类名污染，把伪边框逻辑封装成可配置的 class，例如
border-hairline-t（top）、border-hairline-b（bottom）
真正麻烦的从来不是画一根细线，而是让这根线在各种 DPR、缩放、滚动、主题、嵌套场景下都不偏不晃、不虚不糊。动手前先查清目标机型的 DPR 和浏览器是否支持 transform-origin 对 scaleY 的精确控制——有些老版 UC 内核会忽略 transform-origin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
