Tag hr

Il tag hr definisce una linea orizzontale di separazione. Il vantaggio del tag è che per tracciare una singola linea, non è necessario creare blocchi aggiuntivi. Non richiede un tag di chiusura.

Esempio

Diamo un'occhiata a come funziona il tag hr:

html<hr>

Результат:

Esempio

Proviamo a cambiare il colore della linea utilizzando la proprietà CSS border-color:

html<hr style="border-color: red;">

Результат:

Esempio

Il colore della linea può essere cambiato anche con la proprietà color (tuttavia, se sono impostate contemporaneamente le proprietà color e border-color - la seconda ha priorità):

html<hr style="color: red">

Результат:

Esempio

Cambiamo ora il colore della linea utilizzando la proprietà CSS border. Nota che in questo caso la linea diventerà a doppio spessore (poiché abbiamo impostato un bordo sia in alto che in basso):

html<hr style="border: 1px solid red;">

Результат:

Esempio

Proviamo a cambiare il colore della linea con la proprietà CSS border-top, e impostiamo solo il bordo superiore. Ora non ci sarà una linea doppia:

html<hr style="border-top: 1px solid red;">

Результат:

Esempio

Rendiamo la linea punteggiata utilizzando la proprietà CSS border-top, impostiamo il valore dotted invece di solid:

html<hr style="border-top: 1px dotted red;">

Результат:

Esempio

Aumentiamo lo spessore della linea utilizzando la proprietà CSS border-width:

html<hr style="border-width: 10px; border-color: red;">

Результат:

Esempio

Ora aggiungiamo altezza height alla linea e un bordo tramite border. Il bordo in questo caso si dividerà in superiore e inferiore:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Vedi anche