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

Question

Я хочу изменить толщину моего горизонтального правила в CSS. Я знаю, что это можно сделать в HTML, вот так -

<hr size="10">

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

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

Answer 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;" />

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

Answer 2

Рендеринг субпикселей в браузерах

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

В основном, если ваш монитор является ЖК-дисплеем, а вы рисуете вертикальные линии, вы можете легко нарисовать линию 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-файл вместо встроенных стилей. Они обеспечивают центральное определение для всего сайта, а не только конкретного элемента. Это делает ремонтопригодность намного лучше.

Answer 3

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

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

---

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

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

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

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

---

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

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

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

---

Вариант 3, ЦВЕТ по желанию:

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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

<hr style="opacity: 0.25">

Answer 7

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

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

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