Границы в CSS меньше, чем 1px [дубликат]

Question

Границы в CSS меньше, чем 1px [дубликат]

Возможные Дубликаты:
HTML: Субпиксельная граница

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

887 5

css border

5 ответов:

Comments

Ничего не найдено.

Yanick Rochon · Accepted Answer · 2017-05-15 19:56:25

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

здесь тест чтобы доказать это:
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>
выход

что дает иллюзию, что последний DIV имеет меньшую ширину границы, потому что синий границы сливается с белым фоном.

изменить : альтернативное решение

Альфа-значения могут также использоваться для имитации того же эффекта, без необходимости вычислять и манипулировать значениями RGB.
.container {
  border-style: solid;
  border-width: 1px;
  
  margin-bottom: 10px;
}

.border-100 { border-color: rgba(0,0,255,1); }
.border-75 { border-color: rgba(0,0,255,0.75); }
.border-50 { border-color: rgba(0,0,255,0.5); }
.border-25 { border-color: rgba(0,0,255,0.25); }
<div class="container border-100">Container 1 (alpha = 1)</div>
<div class="container border-75">Container 2 (alpha = 0.75)</div>
<div class="container border-50">Container 3 (alpha = 0.5)</div>
<div class="container border-25">Container 4 (alpha = 0.25)</div>

duskwuff · Accepted Answer · 2012-12-15 11:52:40

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

Gagan Deep · Accepted Answer · 2012-12-15 11:54:24

попробуйте дать границу в%, например, 0,1% в соответствии с вашими потребностями.

Sharpless512 · Accepted Answer · 2012-12-15 12:08:29

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

arttronics · Accepted Answer · 2012-12-15 12:56:16

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

примеры:
.box1 {
  border: 1px solid black;
  border-left: 0;
}

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