伪元素+transform缩放是最稳定方案，因border-width:0.5px在安卓webview中常被四舍五入为0；用::after+height:1px+scaley(0.5)+transform-origin可精准实现1物理像素边框。
直接用 border 工具类在高 DPR 移动设备上画边框，大概率会粗得离谱——这不是 Tailwind 的 bug，是 CSS 像素和物理像素对不上导致的底层问题。Tailwind 本身不内置 1px 物理边框方案，必须自己扩展。
为什么 tailwind 的 border-{size} 类不能直接解决 1px 问题
Tailwind 的 border、border-b 等类最终生成的是标准 CSS border: 1px solid #xxx，它完全遵循浏览器对 “1px” 的解释：在 DPR=2 的 iPhone 上，这会渲染成 2 物理像素宽。Tailwind 不做设备探测，也不动态注入缩放逻辑，所以你写 border-b，它就真给你画一条“CSS 1px”，而不是“物理 1px”。
常见错误现象：
- 开发时在 Chrome 模拟器里看着正常，真机一测边框发虚或加粗
- 写了
border-b border-b-gray-300，但列表项分割线明显比设计稿厚 - 试图用
border-b-[0.5px]—— Tailwind 默认不支持小数单位，且即使启用了，0.5px 在多数 DPR=2 设备上仍被向上取整为 1px（即 2 物理像素）
如何用伪元素 + transform 扩展 Tailwind 实现物理 1px
核心思路是绕过 border 属性，用 ::after 画一个 2px 高的条，再用 transform: scaleY(0.5) 缩到物理 1px。Tailwind 支持通过 @layer 注入自定义样式，并用 @apply 复用。
实操建议：
- 在
src/styles.css或tailwind.config.js的content覆盖范围内，添加如下 CSS：
.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;
}
<p>.border-b-hairline {
position: relative;
}</p>
然后在 HTML 中使用：<div class="border-b-hairline">...</div>
注意点：
-
height: 2px是基准值，scaleY(0.5)后才得到物理 1px；不要写height: 1px再 scale，那会变成 0.5 物理像素（可能不可见） - 必须给宿主元素加
position: relative（上面已封装进类），否则::after无法准确定位 - DPR=3 设备需单独处理：
@media (-webkit-min-device-pixel-ratio: 3) { .border-b-hairline::after { transform: scaleY(0.333); } }
如何让 Tailwind 支持动态缩放值（如 DPR=3 时用 0.333）
CSS 变量不能直接用于 transform: scaleY(var(--scale))，浏览器会忽略该声明。真正可行的方式是 JS 注入内联 style 或媒体查询硬编码。
推荐做法（兼顾性能与精度）：
- 在页面初始化时运行一段轻量 JS：
const dpr = window.devicePixelRatio || 1;
const scale = dpr >= 3 ? 0.333 : dpr >= 2 ? 0.5 : 1;
document.documentElement.style.setProperty('--hairline-scale', scale);
然后改写 CSS：
.border-b-hairline::after {
transform: scaleY(var(--hairline-scale));
/* 其他属性不变 */
}
这样既避免了多套媒体查询，又保证了 DPR=2.83 这类非整数设备也能映射到合理缩放值（前提是 JS 中做了 Math.round(dpr) 或截断）。
圆角边框和点击穿透这两个坑怎么绕开
给带圆角的容器加伪元素边框，最容易出问题的不是“画不出”，而是“画歪了”或“点不了”。
关键限制：
- 不要在伪元素上设
border-radius—— 缩放后弧度失真，视觉上变尖甚至断裂 - 正确做法：把
border-radius和overflow: hidden加在宿主元素上，让伪元素超出部分被裁剪 - 伪元素默认会拦截所有鼠标/触摸事件，哪怕只是画条线 —— 必须加
pointer-events: none，否则按钮点不动、输入框点不进 - 如果边框区域本身需要响应点击（比如可点击的分隔线），就别用伪元素方案，改用
box-shadow: 0 1px 0 #e5e7eb（仅适用于单侧、无圆角场景）
真机测试比模拟器重要得多：有些机型（如部分安卓 WebView）对 transform-origin 解析有偏差，bottom 可能不如 0 100% 稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
