Як я можу змінити товщину мітки <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 замість стилів рядка. Вони дають центральне визначення для всього сайту, а не лише для конкретного елемента. Це робить ремонтопридатність набагато кращою.

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

До HTML5, WAS був коротший шлях на 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;
}

атрибут висоти застарілий у html 5. Що я б робив, це створити межу навколо години та збільшити товщину межі як такої: 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>