伪元素+scale是解决retina屏1px边框问题的首选方案，因其不依赖0.5px支持、不修改viewport、无需图片或js，且可精确控制单边/四边/圆角；需注意position、transform-origin、box-sizing及dpr适配。
直接用 border: 1px 在 Retina 屏上就是 2px，这不是 bug，是设备像素比（dpr）导致的物理渲染结果。想“看起来是 1px”，必须绕过浏览器对 border 的默认放大逻辑——transform: scale() 配合伪元素是最可控、兼容性最稳的路径。
为什么伪元素 + scale 是首选方案
因为它是唯一不依赖设备是否支持 0.5px、不修改 viewport、不引入图片或 JS 动态逻辑，还能精确控制单边/四边/圆角（稍作调整）的纯 CSS 解法。
-
0.5px在 Safari 和多数安卓 WebView 中仍被向上取整为 1px（即实际还是 2 物理像素），测试不可靠 - viewport 缩放会全局影响字体、间距、触摸区域，容易引发其他布局和交互问题
- border-image 或 background-image 要维护多套资源，改颜色/圆角成本高，且部分安卓机有
fill默认行为导致点击失效 - 伪元素方案只作用于目标元素，样式可复用、可组合、调试直观
:after 实现下边框的最小可用代码
这是最常用场景（如列表项分隔线），也是最容易写错的地方：transform 起点、盒模型、父容器定位缺一不可。
- 父元素必须设
position: relative，否则::after会相对于 body 定位 -
bottom: 0+transform-origin: left bottom才能保证缩放后下边框贴底不偏移 - 不能用
border-bottom: 1px，得用height: 1px+background，否则缩放后边缘模糊 - 要加
-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: left bottom;
transform-origin: left bottom;
}
全边框缩放时 box-sizing 必须设为 border-box
如果直接对 border: 1px solid 缩放，伪元素会因默认 box-sizing: content-box 多出 1px 边距，导致四边错位或溢出。
- 必须显式写
box-sizing: border-box，让 width/height 包含 border - 缩放比例统一用
scale(0.5)，不要拆成scaleX/scaleY，避免横竖不一致 -
transform-origin推荐用left top，适配大多数从左上开始布局的容器 - 若需圆角，border-radius 要在伪元素上设，并按 dpr 翻倍（如 dpr=2 时设
border-radius: 2px）
.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid #ddd;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
别忽略 dpr 判断和颜色继承问题
硬编码 background-color: #ddd 看似简单，但实际项目中边框色常来自主题变量或父级继承，直接写死会导致维护困难。
- 用 CSS 自定义属性替代颜色值，例如
background-color: var(--border-color, #ddd) - 建议用 JS 检测
window.devicePixelRatio >= 2后，给加类（如hairlines），再用媒体查询或类选择器控制是否启用伪元素方案 - 不要覆盖 Bootstrap 的
.border类，新建语义类（如.border-hairline），避免影响其他组件的 border 行为 - 阴影（
box-shadow）、圆角（border-radius）与该方案不天然兼容，需在伪元素上单独处理，不能依赖原生 border 属性
真正难的不是写出一段能跑的代码，而是让这个方案在表单控件、弹窗蒙层、滚动区域里都稳定不偏移——关键就在 transform-origin 的起点选择和 box-sizing 的显式声明。漏掉任意一个，都可能在某个机型上突然多出半像素间隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
