Jak mogę zmienić grubość mojego znacznika <hr>

Chcę zmienić grubość mojej poziomej reguły ( <hr>) w CSS. Wiem, że można to zrobić w HTML -

<hr size="10">

Ale słyszę, że jest to przestarzałe, jak wspomniano tutaj w MDN . W CSS próbowałem użyć, height:1pxale nie zmienia to grubości. Chcę, żeby <hr>linia była 0.5pxgruba.

Korzystam z Firefox 3.6.11 na Ubuntu

Aby uzyskać spójność, usuń wszelkie granice i użyj wysokości dla <hr>grubości. Dodanie koloru tła spowoduje stylizację <hr>z określoną wysokością i kolorem.

W twoim arkuszu stylów:

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

Lub wbudowany, jak masz:

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

Dłuższe wyjaśnienie tutaj

Renderowanie subpikseli w przeglądarkach

Renderowanie subpikseli jest trudne. Nie można oczekiwać, że monitor wyświetli cienką linię o grubości mniejszej niż piksel. Ale możliwe jest podanie wymiarów subpikseli. W zależności od przeglądarki renderują je inaczej. Sprawdź post na ten temat w blogu Johna Resiga .

Zasadniczo, jeśli monitor jest wyświetlaczem LCD i rysujesz linie pionowe, możesz łatwo narysować linię 1/3 pikseli. Jeśli tło jest białe, podaj kolor linii #f0f. Dla oka ta linia będzie miała 1/3 szerokości piksela. Chociaż będzie miał jakiś kolor, jeśli powiększysz monitor, zobaczysz, że tylko jeden segment całego piksela (składający się z RGB) będzie ciemny. Jest to technika stosowana do precyzyjnego podpowiedzi typu, tj . ClearType .

Ale linie poziome mogą mieć wysokość tylko pełnego piksela. To ograniczenie technologiczne monitorów LCD. Kineskopy były jeszcze bardziej skomplikowane z ich trójkątnymi luminoforami (chyba że były to kratki typu apertura, np. Sony Trinitron), ale to inna historia.

Zasadniczo podanie wymiaru subpikselowego i oczekiwanie, że będzie renderowany w ten sposób, jest tym samym, co oczekiwanie, że zmienna całkowita będzie przechowywać liczbę 1,2034759349. Jeśli zrozumiesz, że jest to niemożliwe, powinieneś zrozumieć, że monitory nie są w stanie renderować wymiarów subpikseli.

Bezpieczny styl dla różnych przeglądarek

Ale sposób, w jaki mieszają się poziome reguły, zwykle wykonuje się za pomocą kolorów. Więc jeśli twoje tło jest na przykład białe ( #fff), zawsze możesz zrobić HR bardzo jasne. Jak #eee.

Bezpiecznym stylem dla wielu przeglądarek dla bardzo lekkiej reguły poziomej byłoby:

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

I użyj pliku CSS zamiast stylów wbudowanych. Zapewniają one centralną definicję całej witryny, a nie tylko konkretnego elementu. To znacznie ułatwia konserwację.

Szukałem najkrótszego sposobu na narysowanie linii 1px, ponieważ całe obciążenie oddzielonego CSS nie jest najszybszym ani najkrótszym rozwiązaniem.

Aż do HTML5, WAS był krótszy dla 1px hr: <hr noshade>, ale .. Atrybut noshade <hr> nie jest obsługiwany w HTML5. Zamiast tego użyj CSS. (ani inne atrybuty używane wcześniej, jako rozmiar, szerokość, wyrównanie ) ...

Teraz ten jest dość trudny, ale działa dobrze, jeśli potrzebna jest najprostsza godzina 1px:

Odmiana 1, CZARNY godz .: (najlepsze rozwiązanie dla czerni)

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

Wyjście: FF, Opera - czarny / Safari - ciemnoszary

Wariant 2, SZARY godz. (Najkrótszy!):

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

Wyjście: Opera - ciemnoszary / FF - szary / Safari - jasnoszary

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

Wyjście: Opera / FF / Safari: 1px czerwony.

Zalecałbym ustawienie HRsamej wartości jako 0pxwysokiej i użycie jej obramowania, aby była widoczna. Zauważyłem, że podczas powiększania i pomniejszania (ctrl + kółko myszy) sama grubość HRsię zmienia, a po ustawieniu ramki zawsze pozostaje taka sama:

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

wysokość atrybutu została uznana za przestarzałą w html 5. To, co bym zrobił, to utworzyć ramkę wokół godziny i zwiększyć jej grubość jako taką: hr style = "border: solid 2px black;"

Dodałem krycie do linii, więc wydaje się cieńsze:

<hr style="opacity: 0.25">

Uważam, że najlepsze osiągnięcie dla <hr>tagu stylizacji jest następujące:

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

I kodu HTML wystarczy dodać: <hr>.

Oto rozwiązanie dla 1-pikselowej czarnej linii bez obramowania i marginesu

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

• Testowane w Google Chrome

Myślałam, że to dlatego, dodać pozostałe odpowiedzi nie obejmują: margin:0px;.

• Próbny

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>

Sugeruję użycie konstrukcji podobnej do

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

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