17370845950

高分屏下CSS的1px边框因dpr映射为2物理像素，导致变粗模糊；解决思路是用0.5px边框（Chrome50+/Safari8+/Firefox44+/Edge17+支持）使其在dpr=2时精准渲染为1物理像素。

高分屏（如 Retina、2K/4K 屏）下，CSS 中设置 border: 1px 常常显示为 2px 物理像素，导致细边框变粗、不一致，甚至出现模糊或虚化。这不是 bug，而是设备像素比（dpr）和浏览器渲染机制共同作用的结果。解决核心思路是：绕过“1px = 1 CSS 像素”的默认映射，让边框真正只占 0.5 个物理像素，或用视觉缩放模拟“更细”的效果。

用 0.5px 边框（推荐，但需注意兼容性）

现代主流浏览器（Chrome 50+、Safari 8+、Firefox 44+、Edge 17+）已支持 0.5px 的 border 宽度，它在 dpr=2 的屏幕上会精准渲染为 1 物理像素，视觉上就是真正的“细线”。

• 直接写 border: 0.5px solid #ccc; 即可，无需额外 hack
• 注意：iOS Safari 旧版本（
• 搭配 viewport 设置更稳妥：，避免缩放干扰像素计算

用 transform: scale(0.5) 模拟 0.5px（兼容性更好）

对不支持 0.5px 的环境，可用伪元素 + 缩放的方式“画”出细边框。原理是：先创建一个 1px 高/宽的伪元素，再用 scale(0.5) 将其缩小一半，同时用 transform-origin 精准定位，使其居中贴合目标边缘。

• 例如实现上边框：
  .thin-top::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #ccc; transform: scaleY(0.5); transform-origin: top; }
• 必须配合 position: relative 在父元素上，且伪元素需设 pointer-events: none 避免遮挡交互
• 注意 dpr 动态变化（如横竖屏切换），可结合 JS 检测 window.devicePixelRatio 来条件启用

慎用 box-shadow 模拟细边（仅限简单场景）

用 box-shadow: 0 1px 0 #ccc 可以“伪造”下边框，适合单边、静态、无圆角需求的场景。但它本质是阴影，无法响应 hover 或 focus 的边框变化，也不支持 border-radius 的连贯过渡。

• 优点：代码极简，无缩放失真，兼容性最好
• 缺点：不能四边同用（多层 shadow 性能差）、颜色叠加易发灰、无法精确控制边框位置
• 不建议用于表单控件、卡片分隔线等需要清晰边界语义的场景

基本上就这些。优先试 0.5px，加个简单兼容判断；需要全端稳态支持，就用 transform scale 伪元素方案。别硬扛 1px，在高分屏上它真的不细。