Из-за сетчатки дисплеи имеют такую высокую плотность пикселей, 1 пиксельная граница может выглядеть довольно большой на этих дисплеях. Как предложил Брэд Бердсалл, свойство CSS box-shadow можно использовать для создания границ «0,5 px», которые выглядят намного элегантнее на экране сетчатки (см. http://bradbirdsall.com/mobile-web-in-high-resolution).Retina display: 1px border vs box-shadow as border - unsharp on retina, не отображается на регулярном дисплее
В одном из его примеров, он делает это:
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. Но при масштабировании вы можете ясно видеть, что линия не sharp - у нее есть какая-то размытость на одной стороне, которая вызвана, потому что это тень коробки и никакая граница, я считаю. Могу ли я что-нибудь сделать?
Кроме того, на моем дисплее ноутбука без сетчатки ничего не появляется. Это нормально, потому что линия просто тонкая или я делаю что-то неправильно? Я просто используя свой пример синтаксиса, как это:
box-shadow: inset 0 0 1px #000;
Из-за их высокой плотности пикселей не должно быть меньше границ на сетчатке? 1 пиксель всегда 1 пиксель. Возможно, вы видите границу, большую, потому что вы не работаете с родным DPI ... – siannone
Я знаю, что это немного «удар», но просто для того, чтобы разъяснить другим, читающим это, на MacBook Pro с отображением сетчатки, 1px - не 1px, так как компьютер SIMULATES экран 1440x900 и фактически использует более 1px для представления «1px сплошной границы». @Sven вы когда-нибудь получали эту работу? Я попытался, но сдался, когда у меня получилось только тень внизу. Я думаю, что Брэд Бердсалл пропустил немного объяснений. – twistedpixel
@ dieselpower44 Нет, я никогда не работал и перестал использовать радиус распространения с тех пор, когда активируется пользовательский зум. Какой позор! – Sven