css盒模型本身不会模糊，模糊的是它承载的位图资源（如background-image）；修复关键是让高dpr设备加载物理尺寸匹配的高清图，并用background-size锁定逻辑像素尺寸。
直接说结论：CSS盒模型本身不会模糊，模糊的是它承载的位图资源（比如 background-image），修复关键不是调盒模型属性，而是让高 DPR 设备加载物理尺寸匹配的高清图，并用 background-size 锁定逻辑像素尺寸。
为什么 background-image 在 Retina 下模糊和 box-sizing 无关
很多人误以为 box-sizing: border-box 或 margin 计算错误导致模糊，其实完全不是。模糊只发生在位图渲染环节：当设备像素比（dpr）为 2 时，1 个 CSS 像素需用 2×2 物理像素填充，若你给的图是 20×20px 的 1x PNG，浏览器只能拉伸它——没有新像素可补，必然糊。
-
box-sizing、padding、border都只影响布局计算，不参与位图采样 - 模糊现象只出现在
background-image、content: url()或伪元素背景中 - 如果用 SVG 或纯色渐变，根本不存在“Retina 模糊”问题
media query 必须同时写 -webkit-min-device-pixel-ratio 和 min-resolution: 2dppx
单写一个条件会漏掉大量真实设备：
- iOS Safari 9–12 不支持
min-resolution，必须靠@media (-webkit-min-device-pixel-ratio: 2) - Chrome / Firefox / 新版 Safari 优先认
min-resolution: 2dppx，192dpi易因系统缩放误触发 - 两个条件用逗号分隔，表示“或”关系，确保覆盖全：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) - 不要混写成
@media (min-resolution: 2dppx), (min-resolution: 192dpi)——这是冗余且危险的
background-size 必须显式设为设计稿逻辑尺寸
这是最容易被跳过的一步。即使你正确加载了 icon@2x.png（48×48px），如果没设 background-size，浏览器默认按图片原始尺寸渲染，结果就是 48×48 CSS 像素占满本该是 24×24 的容器，视觉上放大一倍、严重失真。
- 基础规则里写
background-size: 24px 24px（对应 1x 图尺寸） - 媒体查询里**必须重写**
background-size: 24px 24px，不能省略 - 不要用
background-size: contain或cover替代——它们不解决像素密度问题，反而掩盖尺寸错配 - 伪元素（
::before）同样要设content: ""+display: block+ 显式宽高，否则无渲染区域
构建工具路径必须真实存在，image-set() 不会自动找 @2x
image-set() 看似简洁，但 Vite/Webpack 默认不处理其内部字符串。如果你写：
.logo { background-image: image-set("logo.png" 1x, "logo@2x.png" 2x); }
而构建产物里只有 logo.png，没有 logo@2x.png，就会 404，退回到 1x 图，看起来还是糊。
- 确保构建配置把
@2x文件实际输出到dist目录（如 Vite 的public目录需手动放） -
image-set()中的路径是相对 CSS 文件的，不是相对 HTML 的 - Firefox 目前仍需前缀：
-webkit-image-set()，且仅支持部分版本 - 真正稳妥的 fallback 是媒体查询方案，
image-set()只建议作为增强层加在上面
最常被忽略的点是：高清图的物理尺寸必须严格是 1x 图的整数倍（2x 就得翻倍，3x 就得三倍），不能靠 background-size “缩放”一张小图假装高清——位图没有可缩放的矢量信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
