在高 dpr 设备上实现视觉 1px 边框，应使用伪元素 + transform: scaley() 缩放方案，而非 border: 0.5px（浏览器不支持且不可靠）；需配合 position: relative、transform-origin: left bottom、box-sizing: border-box 及媒体查询精准控制。
直接用 border: 1px 在 iPhone 或高 DPR 安卓机上就是物理 2px/3px，这不是写法错，是浏览器按设备像素比（dpr）真实渲染的结果；想“看起来是 1px”，必须绕过 border 的默认映射逻辑——伪元素 + transform: scaleY() 是目前最可控、零 JS、无兼容风险的纯 CSS 解法。
为什么不能直接写 border: 0.5px
绝大多数浏览器不支持非整数 px 边框宽度：Safari 会四舍五入回 1px，多数安卓 WebView 直接忽略或当 0px 处理。实测 border-width: 0.5px 在 iOS 16+ 和 Chrome Android 上仍不稳定，不能作为上线方案。
-
0.5px不是标准 CSS 长度单位，W3C 规范未强制要求支持 - 即使某版本渲染成功，也无法保证颜色、圆角、阴影等行为一致
- 无法响应式适配
dpr=3设备（需0.333px，更不可行）
::after + scaleY(0.5) 下边框怎么写才不偏移
这是最容易出错的场景：缩放后伪元素没贴底、左右溢出、边缘模糊。关键不是“加伪元素”，而是定位起点和盒模型控制。
- 父元素必须设
position: relative，否则::after会相对于body定位 - 伪元素用
height: 1px+background-color，不用border-bottom: 1px（后者缩放后边缘发虚） -
transform-origin必须设为left bottom，否则scaleY(0.5)会从顶部压缩，导致线浮在半空 - 要加
-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 会让伪元素宽高多出 2px（上下各 1px 边框），缩放后四边错位、右侧/底部溢出。
- 显式写
box-sizing: border-box，让width/height包含 border，避免尺寸计算偏差 - 全边框推荐用
scale(0.5)而非拆成scaleX/scaleY，防止横竖缩放比例不一致 - 缩放后需加
pointer-events: none，否则可能拦截点击事件
如何只对高 DPR 设备启用，避免桌面端误缩放
不能全局加 ::after 缩放，否则 dpr=1 的桌面屏会把 1px 渲染成 0.5px（视觉消失）。必须用媒体查询精准命中高分屏。
- 用
@media (-webkit-min-device-pixel-ratio: 2)或@media (min-resolution: 192dpi)双保险 - 不要覆盖 Bootstrap 的
.border类，新建语义类如.border-1px，保持原有样式不受影响 - 颜色无法继承
border-color，需手动设background-color，可用 CSS 变量统一管理，例如background-color: var(--border-color, #ddd)
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.border-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ddd;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
pointer-events: none;
}
}
真正难的不是写出这段 CSS，而是记住：缩放比例必须和当前设备 dpr 严格对齐（dpr=3 时得用 scale(0.333333)，SCSS 里不能写 1/3），且所有缩放都依赖 transform-origin 和 position 的精确配合——差一个像素、少一个前缀，线就歪了或没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
