Come sappiamo, HTML fornisce la struttura delle pagine Web e i CSS possono essere utilizzati per applicare gli stili. CSS ha anche proprietà di stile diverse che vengono utilizzate per disegnare forme diverse, come quadrati, cerchi, rettangoli, ovali, linee e altro ancora. Più specificamente, una linea è uno degli elementi più versatili e comunemente usati del design che possono essere aggiunti orizzontalmente e verticalmente.

Questo articolo insegnerà la procedura per tracciare linee orizzontali e verticali usando CSS. Iniziamo!

Come tracciare una linea con CSS?

Per disegnare linee orizzontali e verticali usando CSS, è possibile utilizzare proprietà diverse, come: ad esempio:

• "bordo-sinistra"
• "Bordo-destra"
• "Border-top"
• "Border-Bottom"

Andiamo avanti per capire il funzionamento delle proprietà sopravvalutate una per una!

Html
Per tracciare linee, in primo luogo, specificheremo il ""Elemento all'interno del corpo del nostro file HTML:

Ora, per modellare un div, utilizzare le proprietà adatte. Nel nostro caso, assegneremo il "colore di sfondo"Valore della proprietà come"#e4a2a4", e il "confine"Valore della proprietà come"2px Solid #0FAFC4", Che indica la sua larghezza, tipo e colore, rispettivamente, e"altezzaLa proprietà "è impostata come"200px".

CSS

div
Background-color: #E4A2A4;
bordo: 2px solido #0fafc4;
Altezza: 200px;

Esempio 1: disegna la linea orizzontale con CSS
Di solito, il

---

L'elemento viene utilizzato per tracciare linee orizzontali in HTML. Tuttavia, per disegnare una linea orizzontale con CSS, aggiungi

elemento per l'intestazione e poi posizionare un nome "H_line"All'interno del Div sopra descritto del file HTML.

Html

Linea orizzontale

Ora, usa le proprietà CSS per disegnare una linea orizzontale:

• Useremo il “Border-Bottom"Proprietà, che è associata a uno a tre valori per larghezza della linea, tipo di linea e colore. L'esempio sotto fornito imposta il suo valore come "6px Solid RGB (80,80,78)".
• Per regolare le dimensioni della linea, abbiamo impostato il "larghezza"Valore della proprietà come"300px".
• IL "margine"Il valore della proprietà è impostato come"auto", Rappresentando che il margine è uguale da tutti i lati. IL "in fondo"La proprietà può anche essere utilizzata per questo scopo.

CSS

.h_line
Border-Bottom: 6px Solid RGB (80, 80, 78);
larghezza: 300px;
Margine: auto;

Ora salva il file HTML e aprilo nel browser:

Come puoi vedere, abbiamo disegnato con successo una linea orizzontale con la proprietà del bordo CSS.

Esempio 2: disegna la linea verticale con CSS
Per disegnare una linea verticale, aggiungeremo

Tag per l'intestazione e poi posizionare un nome "v_line"All'interno del Div sopra descritto del file HTML.

Html

Linea verticale

Forniamo il "v_line"Div con alcune proprietà CSS. Per disegnare una linea verticale, utilizzeremo:

• IL "bordo-sinistra"La proprietà è assegnata con valori"5px Solid RGB (2, 99, 135)", Laddove il primo valore rappresenta la larghezza della linea, il secondo valore rappresenta il tipo di linea e il terzo valore indica il colore.
• IL "in basso a destra"La proprietà può anche essere utilizzata per lo stesso scopo.
• Successivamente, abbiamo definito il "altezza"Della riga impostando il suo valore come"100px".
• Impostato "margine" COME "0 Auto", Dove 0 indica la parte superiore e inferiore e auto rappresenta il margine uguale a sinistra e a destra.
• Per mostrare la larghezza della linea, abbiamo assegnato il "larghezza"Valore della proprietà come"2px".

CSS

.v_line
bordo-sinistra: 5px solido RGB (2, 99, 135);
Altezza: 100px;
Margine: 0 Auto;
larghezza: 2px;

Applicare questi valori traggerà una linea verticale come questa:

Questo è tutto! Abbiamo usato diverse proprietà CSS per disegnare linee orizzontali e verticali.

Conclusione

Puoi usare il "Border-top" O "Border-Bottom"Proprietà per disegnare una linea orizzontale e"bordo-sinistra" O "Bordo-destra"Proprietà per tracciare una linea verticale in CSS. Questa proprietà ha valori da uno a tre, in cui il primo valore definisce la larghezza, il secondo valore definisce il suo tipo, sia solido, tratteggiato, tratteggiato o scanalatura e il terzo valore indica il colore della linea. Questa guida ha spiegato come disegnare linee orizzontali e verticali con CSS.