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

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

<hr size="10">

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

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

Для согласованности удалите все границы и используйте высоту для <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;" />

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

Субпиксельная визуализация в браузерах

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

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

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

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

Кросс-браузерный безопасный стиль

Но способ, которым горизонтальные правила, которые смешиваются , обычно делаются с использованием цветов. Так, если ваш фон, например, белый ( #fff), вы всегда можете сделать его HR очень светлым. Как #eee.

Кросс-браузерный безопасный стиль для очень легкого горизонтального правила:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

И используйте файл CSS вместо встроенных стилей. Они обеспечивают центральное определение для всего сайта, а не только конкретного элемента. Это делает ремонтопригодность намного лучше.

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

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

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

Вариация 1, ЧЕРНЫЙ час: (лучшее решение для черного)

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

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

Вариация 2, СЕРЫЙ час (самый короткий!):

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

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

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

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

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

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

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

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

<hr style="opacity: 0.25">

Я считаю, что лучшим достижением для стиля <hr>тега является следующее:

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

И для HTML кода просто добавить: <hr>.

Вот решение для 1-пиксельной черной линии без рамки или поля

hr {background-color:black; border:none; height:1px; margin:0px;}

• Проверено в Google Chrome

Я думал , что я хотел бы добавить , это потому , что другие ответы не включают в себя: margin:0px;.

• демонстрация

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

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

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

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