伪元素+transform缩放是解决移动端1px边框的核心方案：通过::after创建1px高块，再用transform:scaleY(0.5)配合transform-origin:left bottom精准缩放至1物理像素，同时需设pointer-events:none、box-sizing:border-box及父元素position:relative确保定位与交互正确。
transform: scale() 是目前最常用、兼容性最好、也最容易出问题的移动端 1px 边框解决方案。它不改布局、不依赖 JS 初始判断，但缩放原点、盒模型、伪元素层级这些细节一错，边框就偏移、断裂或遮挡点击。
为什么 scale 缩放能“骗过”高清屏
物理像素密度（devicePixelRatio）为 2 时，CSS 的 1px 实际占 2 物理像素，视觉变粗。用伪元素画一个 1px 高的块，再 transform: scaleY(0.5)，等效于在物理层渲染 1 像素——前提是缩放中心对齐、无额外偏移。
关键不是“缩小”，而是让缩放后的渲染结果精准落在设备单个物理像素上。
:after + scaleY(0.5) 下边框写法及常见错误
这是最典型的单边实现，但以下几点极易漏掉：
立即学习“前端免费学习笔记（深入）”；
-
position: relative必须加在父元素上，否则:after无法绝对定位到底部 -
bottom: 0和transform-origin: left bottom必须匹配，否则缩放后会向上偏移 0.5px -
height: 1px不能替换成border-bottom: 1px solid，否则缩放后边框会模糊或虚化 - 必须加
pointer-events: none，否则伪元素会拦截点击事件（尤其列表项、按钮）
正确写法示例：
.hairline-bottom {
position: relative;
}
.hairline-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ccc;
transform: scaleY(0.5);
transform-origin: left bottom;
pointer-events: none;
}
四边全边框要用 scale(0.5) 而不是 scaleY
单方向缩放只适用于单边；四边需整体缩放，但容易因尺寸放大和 box-sizing 不一致导致溢出：
- 伪元素宽高要设为
200%（如width: 200%; height: 200%），再transform: scale(0.5)回去 -
box-sizing: border-box必须显式声明，否则border会撑开伪元素，造成上下左右各多出 1px -
transform-origin推荐用left top，避免圆角或 padding 场景下错位 - 如果父元素有
border-radius，伪元素也要同步设置，且媒体查询中需按 dpr 放大圆角值（如 dpr=2 时border-radius: 2px）
简写示例：
.hairline-all {
position: relative;
}
.hairline-all::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid #ccc;
box-sizing: border-box;
transform: scale(0.5);
transform-origin: left top;
pointer-events: none;
}
dpr=3 时 scaleY(0.333) 为什么常失效
理论上 devicePixelRatio === 3 时该用 scaleY(0.333)，但实际中常出现断线或锯齿，原因有二：
- CSS
transform缩放不支持亚像素对齐，0.333 渲染后可能被浏览器四舍五入成 0.33 或 0.34，导致高度非整数物理像素 - 部分安卓 WebView 对
scale的 subpixel 渲染支持极差，即使 JS 检测到 dpr=3，硬套0.333反而更糊
更稳妥的做法是：只对 dpr ≥ 2 统一用 scaleY(0.5)，dpr=3 设备交由 border-image 或 SVG 备选方案兜底；或者用 JS 动态注入 CSS 变量，配合 @supports (transform: scaleY(0.333)) 做特性检测而非单纯查 dpr。
真正难的不是写出 scale，而是确保它在 iOS Safari、微信内置浏览器、各代安卓 WebView 里都稳定不出缝——这取决于你是否把 transform-origin、box-sizing、pointer-events 这三处写对，且没和其他伪类（比如 clearfix）冲突。
