直接写border: 1px在高清屏变粗是因为dpr导致1逻辑像素映射为2或3物理像素；解决方案是用伪元素画2px高线再scaley(0.5)缩放，并设position: relative、transform-origin、pointer-events: none及适配dpr的媒体查询。
为什么直接写 border: 1px 在真机上会变粗发虚
这不是 Tailwind 或你代码写错了，而是 CSS 像素和物理像素对不上。iPhone 的 dpr=2，安卓部分机型 dpr=3，浏览器把 1px 当作“设备独立像素”，实际渲染成 2 或 3 个物理像素，再插值拉伸，就糊了、粗了。写 border-width: 0.5px 也不行——多数安卓 WebView 直接四舍五入为 0，边框消失。
::after + transform: scaleY(0.5) 是最稳的单边方案
核心是绕过 border 属性，用伪元素画一条 2px 高的线，再纵向压缩一半。这样在 dpr=2 设备上刚好落进 1 物理像素。
-
height: 2px是基准值，不是1px；缩放后才是物理 1px - 父元素必须加
position: relative，否则::after定位失效 -
transform-origin: left bottom（下边框）或left top（上边框），不匹配就会偏移 0.5px - 一定要加
pointer-events: none，否则伪元素挡住点击 - 颜色用具体值（如
#e5e7eb），别依赖 Tailwind 的border-gray-200动态计算
如何适配 dpr=3 设备（华为/三星等）
硬编码 scaleY(0.5) 只对 dpr=2 有效。dpr=3 必须用 scaleY(0.333)，否则边框变细甚至不可见。
- 用媒体查询区分：
@media (-webkit-min-device-pixel-ratio: 3) - 不要写
scaleY(1/3)，CSS 不支持表达式，得写死0.333 - 如果项目需覆盖全机型，建议同时定义两套类：
.border-b-hairline-dpr2和.border-b-hairline-dpr3 - 别试图用 JS 注入 class——首屏渲染前 JS 还没执行，白屏期边框就错了
四边边框别直接缩放整个元素
给容器本身加 transform: scale(0.5) 会连文字、内边距一起缩，布局全乱。正确做法是用伪元素撑出边框区域，再缩它。
- 用
top/right/bottom/left: 0撑满，border: 2px solid #xxx，再transform: scale(0.5) - 必须设
transform-origin: top left，否则缩放后边框错位 - 如果父容器有
overflow: hidden，缩放后的伪元素可能被裁掉——因为定位仍按原始尺寸算 - 加
box-sizing: border-box到伪元素上，避免border影响宽高计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
