根本原因是高 DPR 屏幕与用户缩放共同导致 1px 边框被非整数物理像素渲染而插值模糊；推荐用 border-image + linear-gradient 实现稳定 1px，或谨慎使用 transform: scaleY(0.5) 并规避三大坑。
为什么缩放时 border 看起来变粗或模糊
根本原因不是 CSS 写错了，而是浏览器在高 DPR（设备像素比）屏幕下把 1px 的 CSS 像素映射到了多个物理像素，而缩放（比如 Chrome 按 Ctrl + 滚轮）会进一步打乱这个映射关系。这时候 border: 1px solid #000 可能被渲染成 1.5 个物理像素，系统只能插值，结果就是发虚、变粗、边缘锯齿。
border-image 配合 linear-gradient 实现真正稳定的 1px
这是目前最可控、兼容性足够（Chrome 29+、Firefox 22+、Safari 7+）的方案，绕过 border-width 的缩放依赖，直接用背景图控制渲染精度：
div {
border: 1px solid transparent;
border-image: linear-gradient(to right, #000, #000) 1;
}
-
border: 1px solid transparent占位，确保盒模型尺寸不变 -
border-image的1表示切片宽度为 1，不拉伸、不重复，强制用原图精度渲染 - 如果需要适配 DPR=2/3 设备，可配合
@media (-webkit-min-device-pixel-ratio: 2)切换 gradient 的色标密度，但多数场景单层 gradient 已足够清晰
用 transform: scaleY(0.5) 要小心的三个坑
这个技巧常被推荐，但实际落地容易翻车：
- 必须搭配
transform-origin: top（或bottom），否则缩放中心偏移，边框位置错位 - 父容器不能有
overflow: hidden，因为scaleY(0.5)会让元素视觉上“压扁”，但布局高度仍是原始值，可能被裁掉 - 在缩放页面（Ctrl +）下，
transform本身也会被二次缩放，导致边框又糊——它只解决 DPR 问题，不解决用户主动缩放问题
媒体查询 + device-pixel-ratio 不是银弹
单纯写 @media (-webkit-min-device-pixel-ratio: 2) { border-width: 0.5px; } 是无效的，因为绝大多数浏览器不支持小数 border-width（Safari 16+ 才开始有限支持）。更现实的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
min-resolution: 2dppx（标准语法）做 DPR 分流 - 分流后不改
border-width，而是切换整套边框实现：DPR≥2 时用border-image或伪元素::after+transform: scaleY(0.5) - 注意
resolution媒体查询在 Windows + 缩放设置为 125%/150% 时可能返回非整数值，建议加容错范围：@media (min-resolution: 1.8dppx)
真正难的不是写出某一种 1px 方案，而是判断当前环境到底是 DPR 导致的模糊，还是用户缩放导致的失真——前者靠设备特性修复，后者几乎无解，只能接受或引导用户重置缩放。
