视网膜显示。1px边框与方块阴影作为边框--在视网膜上不清晰，在普通显示器上不显示。

Question

由于视网膜显示器的像素密度很高，所以1像素的边框在这些显示器上会显得非常大。正如Brad Birdsall所建议的，CSS box-shadow 属性可用于创建 "0.5 px "的边框，在视网膜显示器上看起来更优雅（见 http:/bradbirdsall.commobile-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）。