Come posso cambiare lo spessore del mio tag <hr>

Voglio cambiare lo spessore della mia regola orizzontale ( <hr>) in CSS. So che può essere fatto in HTML in questo modo -

<hr size="10">

Ma ho sentito che questo è deprecato come menzionato qui su MDN . Nel CSS ho provato a usare height:1pxma non cambia lo spessore. Voglio che la <hr>linea sia 0.5pxspessa.

Sto usando Firefox 3.6.11 su Ubuntu

Per coerenza rimuovere eventuali bordi e utilizzare l'altezza per lo <hr>spessore. L'aggiunta di un colore di sfondo darà uno stile <hr>all'altezza e al colore specificati.

Nel tuo foglio di stile:

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

O in linea come lo hai:

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

Spiegazione più lunga qui

Rendering sub-pixel nei browser

Il rendering dei sub-pixel è complicato. Non puoi aspettarti che un monitor esegua il rendering di una linea sottile inferiore a un pixel. Ma è possibile fornire dimensioni sub-pixel. A seconda del browser, li rendono in modo diverso. Controlla questo post sul blog di John Resig al riguardo.

Fondamentalmente se il tuo monitor è un LCD e stai disegnando linee verticali, puoi facilmente disegnare una linea di 1/3 pixel. Se lo sfondo è bianco, indica il colore della linea #f0f. A prima vista questa linea sarà larga 1/3 di pixel. Anche se avrà un po 'di colore, se ingrandissi il monitor, vedresti che solo un segmento dell'intero pixel (costituito da RGB) sarà scuro. Questa è praticamente la tecnica utilizzata per i suggerimenti di tipo fine, ad esempio ClearType .

Ma le linee orizzontali possono raggiungere solo un pixel intero. Questa è la limitazione tecnologica dei monitor LCD. I CRT erano ancora più complicati con i loro fosfori triangolari (a meno che non fossero del tipo a griglia di apertura, ad esempio Sony Trinitron), ma questa è una storia diversa.

Fondamentalmente fornire una dimensione sub-pixel e aspettarsi che venga visualizzato in questo modo è come aspettarsi che una variabile intera memorizzi un numero di 1,2034759349. Se capisci che è impossibile, dovresti capire che i monitor non sono in grado di eseguire il rendering di dimensioni sub-pixel.

Stile sicuro per browser incrociati

Ma il modo in cui le regole orizzontali che si fondono vengono generalmente eseguite utilizzando i colori. Quindi, se lo sfondo è ad esempio bianco ( #fff) puoi sempre rendere HR molto chiaro. Come #eee.

Lo stile sicuro tra browser per una regola orizzontale molto leggera sarebbe:

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

E usa un file CSS invece di stili in linea. Forniscono una definizione centrale per l'intero sito non solo un elemento particolare. Rende molto meglio la manutenibilità.

Stavo cercando il modo più breve per disegnare una linea 1px, poiché l'intero carico di CSS separati non è la soluzione più veloce o più breve.

Fino a HTML5, il WAS era un modo più breve per 1px hr: <hr noshade> ma .. L'attributo noshade di <hr> non è supportato in HTML5. Usa invece CSS. (né altri atti usati prima, come dimensioni, larghezza, allineamento ) ...

Ora, questo è piuttosto complicato, ma funziona bene se è necessaria la maggior parte 1px ora semplice:

Variazione 1, BLACK hr: (migliore soluzione per il nero)

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

Uscita: FF, Opera - nero / Safari - grigio scuro

Variazione 2, GRIGIO h (il più breve!):

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

Uscita: Opera - grigio scuro / FF - grigio / Safari - grigio chiaro

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

Uscita: Opera / FF / Safari: 1px rosso.

Consiglierei di impostare HRse stesso su un valore 0pxelevato e utilizzare invece il suo bordo per essere visibile. Ho notato che quando si ingrandisce e si riduce (ctrl + rotellina del mouse) lo spessore di HRse stesso cambia, mentre quando si imposta il bordo rimane sempre lo stesso:

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

L'attributo height è stato deprecato in html 5. Quello che vorrei fare è creare un bordo attorno a hr e aumentare lo spessore del bordo in quanto tale: hr style = "border: solid 2px black;"

Ho aggiunto opacità alla linea, quindi sembra più sottile:

<hr style="opacity: 0.25">

Credo che il miglior risultato per lo styling <hr>tag sia il seguente:

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

E per il codice HTML è sufficiente aggiungere: <hr>.

Ecco una soluzione per una linea nera da 1 pixel senza bordo o margine

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

• Testato su Google Chrome

Ho pensato di aggiungere questo perché le altre risposte non includono: margin:0px;.

• dimostrazione

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>

Suggerisco di usare la costruzione come

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

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