视网膜显示：1px边框与框阴影作为边框 - 视网膜上不清晰，不会出现在常规显示屏上

Question

由于视网膜显示器具有如此高的像素密度，因此在这些显示器上1个像素边框看起来相当大。正如Brad Birdsall所建议的，CSS box-shadow属性可用于创建“0 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;

Answer 1

我发现将框阴影扩展设置为等于1 / window.devicePixelRatio的值可以解决此问题。在常规屏幕上（dpr = 1）看起来不错，在具有dpr值范围的视网膜/高分辨率显示器上，在我的屏幕上特别是1.25（因此传播为0.8）。

Answer 2

还有其他几种方法可以在视网膜屏幕上执行一个物理像素宽度边框： CSS, Retina, and Physical Pixels 。