高清屏下border: 1px变粗或发虚是因为css逻辑像素与物理像素不匹配，需通过js获取devicepixelratio并结合伪元素缩放或渐变背景实现真正1物理像素边框。
为什么高清屏下border: 1px会变粗或发虚
因为高清屏（dpr > 1）实际像素密度更高，但 CSS 的 1px 是逻辑像素，浏览器尝试用 1 个物理像素渲染时，会做亚像素插值，导致边框灰、虚、不 crisp。这不是 bug，是渲染机制决定的。
直接设 border: 0.5px 无效（多数浏览器不支持非整数 border 宽度），用 transform: scaleY(0.5) 拉伸伪元素也容易失真或错位。
- 关键前提是：必须基于设备像素比（
window.devicePixelRatio）动态调整 - 只靠 CSS（无 JS）的“伪元素 1px”方案，在 dpr=2 时能生效，但 dpr=3（如部分 iPad Pro）就会模糊
- 纯 CSS 方案无法覆盖所有 dpr 场景，硬编码
scaleY(0.33)风险高
用伪元素 + transform: scale() 实现真正 1 物理像素边框
核心思路：让伪元素的高度/宽度对应 1 物理像素，再通过 transform: scale() 缩放到逻辑像素尺寸。需配合 JS 获取真实 dpr 并写入根标签类名（如 data-dpr="2"）。
.box {
position: relative;
}
.box::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ccc;
pointer-events: none;
transform-origin: 0 0;
}
[data-dpr="2"] .box::after {
transform: scale(0.5);
}
[data-dpr="3"] .box::after {
transform: scale(0.333333);
}
- 务必加
pointer-events: none，否则伪元素会拦截点击事件 -
transform-origin: 0 0确保缩放从左上角开始，避免偏移 - 不要用
width: 200%; height: 200%模拟 —— 在 flex/grid 容器中易破坏布局流
更鲁棒的方案：用 background-image + 线性渐变画 1px 边框
避开 transform 缩放和伪元素层级干扰，适合复杂嵌套或需要圆角的场景。本质是用渐变在容器边缘“画”出 1 物理像素线。
.box-border-1px {
background-image:
linear-gradient(0deg, #e0e0e0 50%, transparent 50%),
linear-gradient(90deg, #e0e0e0 50%, transparent 50%),
linear-gradient(0deg, transparent 50%, #e0e0e0 50%),
linear-gradient(90deg, transparent 50%, #e0e0e0 50%);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right, bottom, left;
}
- 四条渐变分别对应上、右、下、左；每条高度/宽度固定为
1px（逻辑像素），但渲染时由浏览器按 dpr 自动映射到物理像素 - 兼容性好（IE10+），且不会影响
border-radius渲染（伪元素方案中圆角常被裁掉） - 慎用于动画容器：background-image 在重绘时开销略高于 border，高频动画建议降级为普通
border
别忽略的细节：字体、阴影、内边距也要适配 dpr
只修复边框不够 —— 如果 font-size: 14px 在 dpr=2 下文字仍发虚，说明未启用系统级清晰渲染；如果 box-shadow: 0 1px 2px 看起来像 2px 模糊，也是同理。
- 确保页面有正确 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 对关键文字，可加
-webkit-font-smoothing: antialiased（仅 iOS/macOS 有效） - 阴影类属性尽量避免
1px偏移，改用0.5px或用filter: drop-shadow()（后者更贴近物理像素） - 最稳妥的做法：在 JS 中根据 dpr 动态设置根字体大小（
html { font-size: 16px * dpr }），再用rem单位统一控制所有尺寸
高清屏适配不是加个伪元素就完事——边框只是表象，背后是整个渲染坐标系与设备物理像素的对齐问题。没读取 devicePixelRatio 的方案，基本都在碰运气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
