Hoe kan ik de dikte van mijn <hr> tag

Ik wil de dikte van mijn horizontale regel (<hr>) in CSS wijzigen. Ik weet dat het zo in HTML kan worden gedaan –

<hr size="10">

Maar ik hoor dat dit verouderdis als vermeld op MDN hier. In CSS heb ik geprobeerd height:1pxte gebruiken, maar de dikte verandert niet. Ik wil dat de regel <hr>0.5pxdik is.

Ik gebruik Firefox 3.6.11 op Ubuntu

Antwoord 1, autoriteit 100%

Verwijder voor consistentie alle randen en gebruik de hoogte voor de <hr>dikte. Als u een achtergrondkleur toevoegt, wordt uw <hr>opgemaakt met de opgegeven hoogte en kleur.

In uw stylesheet:

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

Of inline zoals je het hebt:

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

Langere uitleg hier

Antwoord 2, autoriteit 10%

Subpixelweergave in browsers

Subpixelweergaveis lastig. Je kunt eigenlijk niet verwachten dat een monitor een lijn van minder dan een pixel zal weergeven. Maar het is mogelijk om subpixelafmetingen op te geven. Afhankelijk van de browser geven ze deze anders weer. Bekijk deze blogpostvan John Resig hierover.

Als uw monitor een LCD-scherm is en u verticale lijnen tekent, kunt u eenvoudig een lijn van 1/3 pixel tekenen. Als je achtergrond wit is, geef je lijnkleur #f0f. Voor het oog zal deze lijn 1/3 pixel breed zijn. Hoewel het een bepaalde kleur zal hebben, zou je, als je de monitor zou vergroten, zien dat slechts één segment van de hele pixel (bestaande uit RGB) donker zal zijn. Dit is zo’n beetje een techniek die wordt gebruikt voor fijne typehints, d.w.z. ClearType.

Maar horizontale lijnen kunnen maar een volledige pixel hoog zijn. Dat is de technologische beperking van LCD-monitoren. CRT’s waren nog ingewikkelder met hun driehoekige fosforen (tenzij ze van het diafragmarooster-type waren, bijv. Sony Trinitron) maar dat is een ander verhaal.

In feite is het bieden van een subpixeldimensie en verwachten dat deze op die manier wordt weergegeven, hetzelfde als verwachten dat een integer-variabele een getal van 1.2034759349 opslaat. Als u begrijpt dat dit onmogelijk is, moet u begrijpen dat monitoren geen subpixelafmetingen kunnen weergeven.

Cross browser veilige stijl

Maar de manier waarop horizontale regels invloeienworden meestal gedaan met behulp van kleuren. Dus als je achtergrond bijvoorbeeld wit is (#fff), kun je je HRerglicht maken. Like #eee.

De kruisbrowser veilige stijl voor een zeer lichte horizontale regel zou zijn:

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

en gebruik een CSS-bestand in plaats van in-line stijlen. Ze bieden een centrale definitie voor de hele site niet alleen een bepaald element. Het maakt onderhoudbaarheid veel beter.

3, Autoriteit 2%

Ik zou aanraden om de HRzelf in te stellen als 0pxHIGH en gebruik de rand om in plaats daarvan zichtbaar te zijn. Ik heb gemerkt dat wanneer u in- en uitzoomt (CTRL + muiswiel) de dikte van HRzelf verandert, terwijl wanneer u de rand instelt, blijft het altijd hetzelfde:

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

Antwoord 4

height attribuut is verouderd in html 5. Wat ik zou doen is een rand maken rond de hr
en verhoog de dikte van de rand als zodanig: hr style=”border:solid 2px black;”

Antwoord 5

Ik heb dekking aan de lijn toegevoegd, zodat deze dunner lijkt:

<hr style="opacity: 0.25">

Antwoord 6

Hier is een oplossing voor een zwarte lijn van 1 pixel zonder rand of marge

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

• Getest in Google Chrome

Ik dacht dat ik dit zou toevoegen omdat de andere antwoorden niet het volgende bevatten: margin:0px;.

• Demo

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>

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

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