无法用 border-b-1 实现真正物理 1px 边框，因高 dpr 设备将 1px css 像素映射为多个物理像素；推荐用 ::after + scaley() 伪元素方案，需配合 position: relative、transform-origin: bottom 及分 dpr 媒体查询适配。
直接用 border-b 或 border 类无法实现真正的物理 1px 边框——这不是 Tailwind 的缺陷，而是 CSS 像素在高 DPR 设备上天然映射失真导致的。
为什么 border-b-1 在 iPhone 上看起来像 2px
因为 border-b-1 编译为 border-bottom-width: 1px，而 Safari/Chrome 在 DPR=2 的设备上会把这 1 个 CSS 像素渲染成 2 个物理像素。你写的不是“物理 1px”，只是“逻辑 1px”。border-b-[0.5px] 看似聪明，但多数安卓 WebView 会把它四舍五入为 0 或 1px，不可控。
- DPR=2 → 1px CSS = 2 物理像素（视觉变粗）
- DPR=3 → 1px CSS = 3 物理像素（更粗，甚至发虚）
- 模拟器里正常 ≠ 真机正常；Chrome DevTools 的 DPR 模拟不等于真实渲染行为
用 ::after + scaleY() 实现稳定物理 1px
这是目前兼容性最好、无需 JS、不依赖设备探测的方案：用伪元素画一条 2px 高的线，再纵向压缩到 0.5 倍，最终占 1 物理像素。关键不是“缩放”，而是“缩放 + 定位基点控制”。
- 必须给宿主元素加
position: relative，否则::after无法锚定到底部 -
height: 2px是基准值，transform: scaleY(0.5)后才得物理 1px；写height: 1px再缩放会变成 0.5 物理像素（可能不可见） -
transform-origin: bottom必须显式设置，否则缩放后线条会上移，脱离底部边界 - 颜色用
background-color，不是border-color，避免受 border-style 影响
.border-b-hairline {
position: relative;
}
.border-b-hairline::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 2px;
background-color: #e5e7eb; /* 对应 gray-200 */
transform: scaleY(0.5);
transform-origin: bottom;
pointer-events: none;
}
适配 DPR=3 设备要单独加媒体查询
DPR=2 和 DPR=3 的缩放系数不同：scaleY(0.5) 对 DPR=2 有效，对 DPR=3 就只剩约 0.67 物理像素，仍偏粗。必须用媒体查询区分处理。
- 不要只靠
@media (-webkit-min-device-pixel-ratio: 3)，iOS 和 Android 对min-resolution支持更一致 - 推荐组合写法：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) - DPR=3 时用
scaleY(0.333)，不是0.33——浮点精度会影响渲染一致性 - 如果项目只面向 iOS，可省略
min-resolution，但混合安卓环境必须保留
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
.border-b-hairline::after {
transform: scaleY(0.333);
}
}
Tailwind 中复用这个方案的注意事项
别在模板里反复写 class="border-b-hairline" 就完事——颜色、位置、是否需要暗色模式适配，都得提前考虑清楚。
- 颜色不能硬编码进 CSS；建议用
var(--border-hairline)，并在:root或 dark class 下动态赋值 - 若需顶部/左侧/右侧 1px 线，复制类并改
top/left/right+transform-origin，别强行复用同一个类 - 绝对定位容器内使用时，确保父级没
overflow: hidden，否则伪元素可能被裁掉 - 不要和
border-b同时用——两者叠加会导致视觉错乱，物理像素数翻倍
真正难的不是写出这段 CSS，而是记住：它必须和宿主元素的 position: relative 绑定、必须配合精确的 transform-origin、必须分 DPR 覆盖、且不能与原生 border 类混用。漏掉任意一环，真机上就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
