浏览器缩放时border渲染失真根本不是tailwind问题，而是浏览器对小于1px的border值强制向上映射导致物理宽度不稳定、边缘发虚；应禁用缩放类、用伪元素或transform模拟细线，或禁止用户缩放。
浏览器缩放时 border 渲染失真，根本不是 Tailwind 的问题
缩放后 border 变成 1.067px 或 1.6px，这不是 Tailwind 生成的样式错了，而是浏览器在非 100% 缩放下对像素做重采样导致的——它必须保证“至少能看见边框”，所以会把小于 1px 的计算值向上映射，再反向缩放渲染，结果就是物理宽度不稳定、边缘发虚、甚至挤占布局空间。
box-sizing: border-box 是必选项，但还不够
设 box-sizing: border-box（Tailwind 默认已启用）能防止内容撑宽容器，但它不解决边框自身渲染抖动。真正要稳住的是：让边框参与布局的“基准尺寸”固定下来。
- 给带边框的元素明确设置
width或max-w-类，避免依赖百分比或auto宽度 - 禁用可能干扰的缩放类，比如不要在父容器上同时用
scale-90和border - 若必须缩放，优先用
transform: scale()作用于子元素，而非整个带边框的容器
tailwind 的 border-{size} 在缩放下完全不可信
Tailwind 的 border、border-b-2 等类最终输出的是标准 CSS border: 2px solid #xxx，它没有任何缩放感知逻辑。你在代码里写 border-b，浏览器就按当前缩放比例去解释这个 “1px”，不会自动降为 0.5px 或适配 DPR。
- 缩放 75% 时，
border-b实际渲染 ≈ 1.067px；缩放 50% 时 ≈ 1.6px —— 这是浏览器强制保底行为，无法靠 Tailwind 配置绕过 -
border-b-[0.5px]即使启用了自定义 spacing，也只在未缩放时生效；一旦用户缩放页面，照样被重映射 - 想视觉上“始终看起来是细线”，必须放弃原生
border，改用伪元素 +transform: scaleY(0.5)或background-image模拟
真正稳定的方案只有两个方向
要么接受缩放下边框必然浮动，只在设计规范中禁止用户缩放（加 <meta name="viewport" content="... user-scalable=no">）；要么彻底脱离 border 属性。
- 高兼容性方案：用
::after画 1px 高条，transform: scaleY(0.5)+transform-origin: bottom，并确保父元素有relative - 现代浏览器方案：直接用
border-bottom: 0.5px solid #e5e7eb，但需测试 iOS Safari 15.4+ 和 Android Chrome 90+ 是否一致 - 别碰
border-style: dashed做细线——它的段长由border-width推导，缩放后整除逻辑崩溃，首尾断裂更明显
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
