高分屏下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设置更稳妥：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，避免缩放干扰像素计算
用 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，在高分屏上它真的不细。
