高DPI屏box-shadow边缘发黑是亚像素渲染叠加导致的视觉过曝，需用rgba/hsla显式控制明度与透明度，搭配较大blur-radius和较低alpha，并通过data-dpr属性分档适配。
box-shadow在高DPI屏上边缘发黑，不是颜色写错了
发黑本质是亚像素渲染叠加导致的视觉过曝——高DPR设备（如 macOS Retina、iPad Pro）把一个CSS像素映射到2~3个物理像素，而box-shadow的模糊算法在插值过程中会重复采样暗色边缘，尤其当blur-radius小、color用纯黑rgb(0,0,0)或高alpha时，多个半透层叠就堆出“脏黑边”。这不是bug，是光栅化原理决定的。
别用currentColor或transparent当阴影色
currentColor在box-shadow里只读取元素自身的color值，和背景无关；写transparent等于没加阴影（浏览器按rgba(0,0,0,0)处理）。更糟的是，某些旧版Safari会把transparent回退成纯黑，让发黑更严重。
- 错误写法：
box-shadow: 0 2px 4px currentColor;或box-shadow: 0 2px 4px transparent; - 正确做法：显式用
rgba()或hsla()控制明度+透明度，例如浅色背景用rgba(0, 0, 0, 0.08)，深色背景用rgba(255, 255, 255, 0.06) - 避免直接减RGB值（如
#333→#222），容易偏色；优先用hsla(0, 0%, 20%, 0.1)这类保色相调明度的方式
blur-radius和alpha必须同步调低
高DPI屏对小范围模糊更敏感。blur-radius设为2px配alpha=0.2，在DPR=2设备上实际渲染相当于4物理像素×0.2透明度，极易出现断续或局部过黑；而blur-radius: 8px配alpha: 0.1反而更均匀。
- 推荐组合（浅色背景）：
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08); - 推荐组合（深色背景）：
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06); - 多层阴影慎用：两层
rgba(0,0,0,0.05)叠加 ≠rgba(0,0,0,0.1)，可能在亚像素交界处产生非线性叠加，加重发黑
@media (prefers-color-scheme: dark)不能解决DPI问题
深色模式媒体查询只响应系统主题，不感知DPR。同一台MacBook在DPR=2且系统设为深色时，@media (prefers-color-scheme: dark)生效，但阴影发黑问题依然存在——因为根源是物理像素映射，不是颜色明暗。
立即学习“前端免费学习笔记（深入）”；
- 真正要做的：在JS中读取
window.devicePixelRatio，动态加data-dpr="2"类名，再用CSS区分适配 - 示例：
[data-dpr="2"] .card { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } - 注意：不要用
transform: scale()缩放阴影（它缩放整个盒模型，包括内容），那是给边框用的方案，对box-shadow无效
高DPI下的阴影发黑，核心是“物理像素采样 × 多层半透叠加”的不可控性。最稳的解法不是调参数，而是放弃blur-radius < 4 + alpha > 0.1的组合，统一用稍大模糊配更低透明度，并通过data-dpr做分档控制——毕竟人眼对“轻微柔和”不敏感，但对“局部发黑”极其敏感。
