box-shadow在高dpi屏下变浓发灰，根本原因是blur-radius和spread-radius为逻辑像素单位，渲染时被dpr放大（如dpr=2时4px→8px），导致模糊翻倍、透明度感知增强；应控制blur-radius≤4px、spread-radius为0或偶数，并降低rgba透明度适配。
box-shadow在高DPI屏幕下变浓、发灰，不是写错了
根本原因是blur-radius和spread-radius是逻辑像素单位，但浏览器在渲染时会乘以设备像素比（DPR）——比如 DPR=2 时，box-shadow: 0 2px 4px rgba(0,0,0,0.1) 实际按 0 4px 8px 渲染，模糊区域翻倍，导致阴影“糊开”、透明度感知变强。这不是 bug，是 CSS 像素模型的必然表现。
媒体查询本身不能直接读取 DPR，但可以用@media (-webkit-min-device-pixel-ratio: 2)或@media (min-resolution: 192dpi)这类条件做粗粒度区分。不过更稳的做法是：**不依赖媒体查询动态改值，而是从一开始就把参数设计成 DPI 友好型**。
- 把
blur-radius控制在 ≤4px（推荐 2px 或 4px），避免被放大后失控 -
spread-radius尽量设为 0；若必须用，选偶数（如 2px、-2px），避开 DPR=2 时的 1.5px → 3px 这类舍入误差 - 透明度适当降低：DPR=2 屏幕上
rgba(0,0,0,0.08)的视觉浓度 ≈ DPR=1 下的rgba(0,0,0,0.12)
为什么@media (min-resolution: 192dpi)有时不生效
因为min-resolution匹配的是设备报告的物理分辨率，而很多安卓 WebView 和旧版 Safari 对该媒体特性支持不全，甚至返回错误值。更麻烦的是：MacBook Pro 的 Retina 屏 DPR=2，但系统可能报告 144dpi（非 192dpi），导致规则漏触发。
实操中更可靠的方式是组合判断：
- 优先用
@media (-webkit-min-device-pixel-ratio: 2)（覆盖 Safari / Chrome / Edge） - 补一层
@media (min-resolution: 2dppx)（W3C 标准写法，Firefox 支持更好） - 避免只写一个条件；两个都写，用逗号分隔，让浏览器选能识别的那个
示例：
/* DPR ≥ 2 设备统一降权阴影 */<br>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {<br> .card {<br> box-shadow: 0 1px 2px rgba(0,0,0,0.06);<br> }<br>}
box-shadow配合border-radius在高DPI下圆角断裂
这不是阴影问题，是渲染裁剪逻辑被放大的结果：当border-radius设为 8px，DPR=2 时实际渲染半径为 16 物理像素；但若box-shadow的blur-radius设得过大（比如 12px → 24px），超出圆角范围的部分就会被硬裁成直角——看起来像“圆角消失”。
关键约束是：blur-radius + spread-radius ≤ border-radius × 0.8（DPR=1 下），否则高 DPR 下必断。例如：border-radius: 12px 时，最大安全 blur-radius 是 9px（12×0.8），DPR=2 时它变成 18px，刚好压在圆角边缘内。
- 别用
border-radius: 50%配大 blur —— 百分比半径在 DPR 下缩放不可控 - 确保父容器没设
overflow: hidden，否则 Safari 会二次裁剪阴影 - 如果必须做大扩散效果，改用伪元素 +
background模拟，绕过 shadow 裁剪逻辑
深色模式 + 高DPI + box-shadow的三重叠加陷阱
深色模式下，很多人直接把阴影颜色改成浅灰，比如 rgba(255,255,255,0.1)，但在高 DPR 屏上，这个浅色阴影会被多次采样混合，极易发虚甚至“看不见”。更糟的是：prefers-color-scheme 无法响应 DPR 变化，你没法写@media (prefers-color-scheme: dark) and (-webkit-min-device-pixel-ratio: 2)这种嵌套查询。
真正可行的解法是分层控制：
- 用 CSS 自定义属性定义基础阴影：
--shadow-light: 0 2px 4px rgba(0,0,0,0.08); - 在
@media (prefers-color-scheme: dark)里重设变量值，同时把透明度再降一档：--shadow-light: 0 1px 2px rgba(255,255,255,0.04); - 所有组件统一用
box-shadow: var(--shadow-light)，不硬编码值
这样既规避了媒体查询嵌套限制，又保证了 DPR 变化时，颜色和尺寸仍走同一套缩放逻辑。
最容易被忽略的一点：阴影不是装饰，它是视觉层级信号。在高 DPI 屏上强行维持桌面端的阴影强度，反而会破坏信息密度。有时候删掉box-shadow，靠background-color微差和gap来表达层级，更轻、更稳、更省电。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
