4

由于视网膜显示器具有如此高的像素密度，因此 1 像素的边框在这些显示器上看起来相当大。正如 Brad Birdsall 所建议的，CSSbox-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;
4

1 回答 1

0

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

于 2020-04-27T09:39:17.633 回答