4

Retina ディスプレイはピクセル密度が非常に高いため、これらのディスプレイでは 1 ピクセルの境界がかなり大きく見えることがあります。Brad Birdsall が提案したように、CSSbox-shadowプロパティを使用して、Retina ディスプレイでよりエレガントに見える「0.5 ピクセル」の境界線を作成できます ( http://bradbirdsall.com/mobile-web-in-high-resolutionを参照)。

彼の例の 1 つで、彼はこれを行います。

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では見栄えがします。しかし、ズームインすると、線がシャープではないことがはっきりとわかります。ボックスの影であり、境界線がないため、片側にある種のぼやけがあります. 私にできることはありますか?

また、Retina 以外のラップトップ ディスプレイでは、何も表示されません。線が細くなっているだけなので、それは正常ですか、それとも何か間違っていますか? 私は彼の例の構文を次のように使用しています:

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

1 に答える 1