Как я могу изменить толщину моего тега <hr>

Я хочу изменить толщину моего горизонтального правила (<hr>) в CSS. Я знаю, что это может быть сделано в HTML следующим образом -

<hr size="10">

Но я слышал, что это не рекомендуется, как упомянуто здесь на MDN. В CSS я пытался использовать height:1px но это не меняет толщину. Я хочу, чтобы линия <hr> была толщиной 0.5px.

Я использую Firefox 3.6.11 в Ubuntu

Ответ 1

Для согласованности удалите любые границы и используйте высоту для толщины <hr>. Добавление цвета фона приведет к стилю вашего <hr> с указанием высоты и цвета.

В вашей таблице стилей:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Или встроенный, как у вас есть:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Более длинное объяснение здесь

Ответ 2

Подпиксельная рендеринг в браузерах

Подпиксельная рендеринг сложна. На самом деле вы не можете ожидать, что монитор отобразит тонкую линию размером менее пикселя. Но возможно предоставить субпиксельные размеры. В зависимости от браузера они отображают их по-разному. Отметьте этот пост Джона Ресига .

В принципе, если ваш монитор является ЖК-дисплеем, и вы рисуете вертикальные линии, вы можете легко нарисовать линию 1/3 пикселя. Если ваш фон белый, укажите цвет линии #f0f. Для глаз эта линия будет шириной 1/3 пикселя. Хотя он будет иметь какой-то цвет, если вы увеличите монитор, вы увидите, что только один сегмент всего пикселя (состоящий из RGB) будет темным. Это довольно много техники, которая используется для тонкого типа, например, ClearType.

Но горизонтальные линии могут быть только высотой в пикселях. Это ограничение технологии ЖК-мониторов. ЭЛТ были еще сложнее с их треугольными люминофорами (если бы они не были

Ответ 3

Я искал кратчайший способ рисовать линию 1px, так как целая загрузка разделенного CSS не является самым быстрым или кратчайшим решением.

До HTML5, WAS более короткий путь для 1px hr: < hr noshade > но.. Атрибут noshade <hr> не поддерживается в HTML5. Вместо этого используйте CSS. (и другие атрибуты, используемые до, как размер, ширина, выравнивание)...

Теперь это довольно сложно, но работает хорошо, если требуется самое простое 1px hr:

Вариант 1, BLACK hr: (лучшее решение для черного)

<hr style="border-bottom: 0px">

Выход: FF, Opera - черный /Safari - темно-серый

Вариант 2, GREY hr (кратчайший!):

<hr style="border-top: 0px">

Выход: Opera - темно-серый/FF - серый /Safari - светло-серый

Вариант 3, ЦВЕТ:

<hr style="border: none; border-bottom: 1px solid red;">

Выход: Opera/FF/Safari: 1px красный.

Ответ 4

атрибут height устарел в html 5. Что бы я сделал, это создать границу вокруг hr и увеличить толщину границы как таковой: hr style = "border: solid 2px black;"

Ответ 5

Я бы порекомендовал установить само HR на 0px и использовать вместо него границу. Я заметил, что когда вы увеличиваете и уменьшаете масштаб (ctrl + колесико мыши), толщина самого HR изменяется, а когда вы устанавливаете границу, она всегда остается неизменной:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

Ответ 6

Я добавил непрозрачность в линию, чтобы она стала тоньше:

<hr style="opacity: 0.25">

Ответ 7

Я предлагаю использовать конструкцию типа

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>