Граница CSS менее 1px

Возможный дубликат:
HTML: субпиксельная рамка

border:1px слишком большой. Я хочу иметь его половину размера, но я не знаю, как это сделать. border: 0.5px solid; не работает. Я знаю, что есть решение с background img, но с CSS он будет быстрее.

Ответ 1

Пиксель - это наименьшее значение единицы для рендеринга. Но вы можете обмануть толщину с помощью оптических иллюзий, изменив цвета. (Глаз может видеть только определенное разрешение.)

Вот тест, чтобы доказать это:

div { border-color: blue; border-style: solid; margin: 2px; }

div.b1 { border-width: 1px; }
div.b2 { border-width: 0.1em; }
div.b3 { border-width: 0.01em; }
div.b4 { border-width: 1px; border-color: rgb(160,160,255); }

<div class="b1">Some text</div>
<div class="b2">Some text</div>
<div class="b3">Some text</div>
<div class="b4">Some text</div>

Ответ 2

Невозможно нарисовать линию на экране, которая тоньше, чем один пиксель. Вместо этого попробуйте использовать более тонкий цвет для рамки.

Ответ 3

попробуйте предоставить границу в% для exapmle 0.1% в соответствии с вашими потребностями.

Ответ 4

Минимальная ширина, которую может отображать ваш экран, составляет 1 пиксель. Поэтому его невозможно отобразить меньше 1px. 1 пиксель может иметь только 1 цвет и не может быть разделен.

Ответ 5

Вы все равно можете определить атрибут border и дать ему значение 0 пикселей, полезно, когда одна сторона нуждается в этом значении.

Примеры:

.box1 {
  border: 1px solid black;
  border-left: 0;
}

.box2 {
  border-color: black;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}