Retina 显示：1px 边框与 box-shadow 作为边框 - 在视网膜上不清晰，在常规显示器上不显示答案

【问题标题】：Retina display: 1px border vs box-shadow as border - unsharp on retina, does not show up on regular displayRetina 显示：1px 边框与 box-shadow 作为边框 - 在视网膜上不清晰，在常规显示器上不显示
【发布时间】：2013-03-09 17:51:31
【问题描述】：

由于视网膜显示器具有如此高的像素密度，因此 1 像素的边框在这些显示器上看起来相当大。正如 Brad Birdsall 所建议的，CSS box-shadow 属性可用于创建“0,5 px”边框，在视网膜显示器上看起来更加优雅（请参阅http://bradbirdsall.com/mobile-web-in-high-resolution）。

在他的一个例子中，他这样做了：

box-shadow: inset 0 0 1px #000,
            inset 0 1px 0 #75c2f8,
            0 1px 1px -1px rgba(0, 0, 0, .5);

inset 0 0 1px #000 基本上等于“0,5px”边框 - 在我的 iPhone 上看起来很棒。但是放大时，您可以清楚地看到线条不很清晰 - 它在一侧有某种模糊，这是因为它是一个盒子阴影并且我相信没有边框。有什么我可以做的吗？

另外，在我的非视网膜笔记本电脑显示屏上，什么也没有显示。这是正常的，因为这条线只是太细了还是我做错了什么？我只是使用他的示例语法，如下所示：

box-shadow: inset 0 0 1px #000;

【问题讨论】：

由于像素密度高，Retina 上的边框不应该看起来更小吗？ 1 像素始终是 1 像素。也许你看到的边框那么大是因为你没有使用原生 DPI...
我知道这有点“颠簸”，但只是为了向阅读本文的其他人澄清，在带有视网膜显示屏的 MacBook Pro 上，1px 不是 1px，因为计算机模拟 1440x900 屏幕并且实际上确实如此使用超过 1px 来表示“1px 实心边框”。 @Sven 你有没有得到这个工作？我尝试过但放弃了，因为我最终在底部只有一个阴影。我认为 Brad Birdsall 错过了一点解释。
@dieselpower44 不，从那以后当用户缩放被激活时，我从来没有让它工作并停止使用传播半径。真可惜！

标签： border retina-display css

【解决方案1】：

我发现将 box-shadow 散布设置为等于 1 / window.devicePixelRatio 的值可以解决此问题。它在常规屏幕 (dpr = 1) 和具有一系列 dpr 值的视网膜 / 高分辨率显示器上看起来不错，在我的屏幕上特别是 1.25（因此传播为 0.8）。

【讨论】：