在retina屏上border:1px变粗是因dpr导致物理像素映射失真，可靠解法是用伪元素+transform:scale()缩放，需严格满足定位、锚点、前缀、pointer-events等条件。
直接用 border: 1px 在 Retina 屏上必然变粗——这不是 bug，是 CSS 像素和物理像素映射关系导致的必然结果。真机上看到的“2px 粗线”，本质是 window.devicePixelRatio === 2 时，浏览器把 1 个逻辑像素画成了 2 个物理像素，且不做降采样。唯一可靠解法：不用 border，改用伪元素 + transform: scale() 控制渲染高度。
为什么不能写 border-width: 0.5px
看似最简，实则最不可靠：border-width: 0.5px 在 iOS Safari 中可能生效，但在多数安卓 WebView（尤其是 Android 4.x–10.x）、微信内置浏览器、QQ 浏览器中会被四舍五入为 0px（直接消失）或向上取整为 1px（毫无改善）。更关键的是，DPR=3 设备（如 iPhone 14 Pro）下，0.5px 会渲染为 1.5 物理像素，依然偏粗、发虚。它不解决根本问题，只掩盖部分场景。
::after + scaleY(0.5) 的正确写法
这是目前兼容性最好、可控性最强的单边（如下边框）实现方式，但必须满足以下全部条件，缺一不可：
- 父元素必须设
position: relative，否则::after会脱离上下文定位到body - 伪元素用
height: 1px+background-color，别用border-bottom: 1px——后者受box-sizing和行高干扰，缩放后易错位 -
transform-origin必须显式写成0 100%（左下角），不能只写bottom；Safari 某些版本对关键词解析不一致，会导致缩放后整体上浮 - 必须加
pointer-events: none，否则在部分安卓 WebView 下伪元素会拦截点击/触摸事件 - 要补
-webkit-transform前缀，iOS 12–15 对无前缀transform支持不稳定
示例代码：
.border-bottom-1px {
position: relative;
}
.border-bottom-1px::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ddd;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
pointer-events: none;
}
四边边框怎么写才不飘、不裁、不模糊
单边缩放容易，四边一起上就容易出布局漂移、圆角拉伸、父容器 overflow: hidden 裁掉边框等问题。核心是统一锚点 + 统一缩放 + 盒模型约束：
- 伪元素尺寸设为
width: 200%、height: 200%，再用transform: scale(0.5)整体缩回，确保四边都能铺满 -
transform-origin必须是0 0（左上角），不是center或bottom，否则缩放后边框位置全偏 - 必须加
box-sizing: border-box到伪元素上，否则默认content-box会让 1px border 额外撑开自身尺寸，造成上下左右各多出 1px - 若父容器有
overflow: hidden，缩放后的伪元素可能被裁——加will-change: transform可提升到独立 GPU 图层，防裁剪和模糊 - DPR=3 设备需媒体查询兜底：
@media (-webkit-min-device-pixel-ratio: 3) { .border-1px::after { transform: scale(0.333); } }
真正难的从来不是“怎么写”，而是缩放后是否还精准贴合、是否仍可点击、是否在旧版 Safari 和安卓 WebView 里不偏不糊——这些细节不连真机调试根本发现不了。特别是 transform-origin 写成 bottom 还是 0 100%、pointer-events: none 是否漏加，往往就是线上边框“忽隐忽现”或“悬空半像素”的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
