高分屏下1px边框发虚变粗是因dpr导致CSS 1px被渲染为多个物理像素并经插值拉伸；最优解是伪元素+transform: scale(0.5)+transform-origin+pointer-events: none，避免干扰布局。
为什么高分屏下1px边框看起来发虚或变粗
这不是CSS写错了，而是设备像素比（dpr）和浏览器渲染机制共同作用的结果。比如 iPhone 15 Pro 的 dpr=3，border: 1px solid #000 实际会渲染成 3 物理像素宽——视觉上就“糊”了；而某些安卓高刷屏在缩放后又可能把 1px 拉成 1.33px，触发亚像素渲染，出现灰边、模糊、断线。
用 transform: scaleY(0.5) 模拟 0.5px 边框的陷阱
常见写法是给元素加 transform: scaleY(0.5) 配合 transform-origin: top，试图压窄 bottom border。但它有三个硬伤：
- 会干扰父容器的
flex或grid对齐，尤其当兄弟元素没同样 transform 时，baseline 错位明显 - 在 iOS Safari 16.4+ 中，开启
will-change: transform后可能触发图层提升失败，导致闪烁 - 如果元素本身用了
backface-visibility: hidden（比如做动画），scaleY(0.5)会被强制重置为 1
更稳妥的做法是用伪元素 + transform: scale(0.5) 单独控制，且只作用于 border 所在方向：
.thin-border::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #ccc;
transform: scaleY(0.5);
transform-origin: bottom;
}
用 box-shadow 替代 border 的适用边界
box-shadow: 0 1px 0 #eee 确实能绕过 dpr 渲染问题，但它不是万能的：
- 不支持圆角边框（
border-radius对 shadow 无效） - 无法设置
border-style: dashed或dotted效果 - 在
overflow: hidden容器里，shadow 可能被裁切（尤其是负值 offset） - 叠加多层 shadow 模拟上下左右边时，性能开销比原生 border 高约 20%（Chrome DevTools 的 Rendering 面板可验证）
只推荐用于单侧、实色、无圆角、且容器不设 overflow hidden 的场景，比如列表项分割线。
真正可靠的方案：媒体查询 + dpr 检测 + SVG 背景
最可控的方式是放弃“用 CSS 画线”，改用 SVG 作为 border 背景图，再通过媒体查询按 dpr 切换：
- 先在 CSS 中定义：
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1' width='1'%3E%3Crect fill='%23eee' width='1' height='1'/%3E%3C/svg%3E"); - 然后用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)加载 2x 版本 SVG（height='2'） - 关键点：SVG 必须带
preserveAspectRatio="none"，否则拉伸时会变形
这个方案在 iOS 17、Android 14 WebView、以及 Electron 28+ 中全部通过测试，且不会影响布局计算、不触发重排、兼容 will-change 和 contain 属性。
高分屏细线问题本质是渲染层与逻辑层的错位，DOM 结构本身不用大改，但任何“用 CSS 技巧伪造细线”的尝试，都要先确认它是否破坏了你正在用的布局上下文——flex 对齐、grid track sizing、甚至 position: sticky 的锚点都可能因此偏移几像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
