Come limitare la lunghezza del confine? - CSS

Durante la progettazione di un sito Web, a volte, gli utenti hanno difficoltà a creare un bordo più corto del suo elemento principale. Per superare questa difficoltà, vengono utilizzati più proprietà CSS ed elementi HTML. Per questo obiettivo, alcuni elementi HTML, tra cui "","", O "Pseudo-elementi" E "confine"Vengono utilizzate le proprietà. Inoltre, gli utenti possono limitare il confine utilizzando il "bordo-sinistra","Border-Bottom","Bordo-destra", E "Border-top" proprietà.

Questo post ha spiegato il metodo per limitare la lunghezza del bordo in CSS.

Come limitare la lunghezza del bordo con CSS?

Per limitare la lunghezza del bordo con CSS, prova le istruzioni menzionate una ad uno.

Passaggio 1: crea un contenitore di div

Innanzitutto, crea un contenitore div con il "Tag e aggiungi il "classe"Attributo all'interno del tag.

Passaggio 2: contenitore di div nidificato creato

Quindi, aggiungi un altro contenitore di div tra i primi tag e inserisci un "id"Attributo:

Passaggio 3: modella l'elemento "div"

Ora, modella il "div"Applicando le seguenti proprietà CSS:

.main-div
Altezza: 150px;
larghezza: 100px;
Posizione: relativo;
Background: #B3F00B;

I dettagli del codice sopra menzionato sono i seguenti:

• Innanzitutto, accedi al contenitore con l'aiuto di ".Main-Div" classe.
• Il aggiunto "altezza"La proprietà definisce l'altezza del contenitore Div.
• Poi, "larghezza"Definisce la dimensione della larghezza dell'elemento.
• Prossimo, "posizione"Assegna il tipo di metodo di posizionamento utilizzato per un elemento. Ad esempio, abbiamo utilizzato il "parente"Per cambiare la posizione rispetto a se stessa e l'elemento genitore.
• Dopo di che, "sfondo"Viene utilizzato per impostare lo sfondo per il div.

Produzione

Passaggio 4: impostare il bordo inferiore

Border-Bottom: 2px Solid #1C2AF5;

Per impostare il bordo inferiore di un div, il CSS "Border-Bottom"È utilizzato. Qui, il primo valore specifica la larghezza del bordo, il secondo è lo stile del bordo e il terzo è il colore del bordo.

Produzione

Passaggio 5: limite il bordo sinistro

#Border-Left
bordo-sinistra: 2px solido #2a1cf5;
Posizione: assoluto;
Top: 50%;
In basso: 0;

Nel codice di menzione sopra, il "#bordo-sinistra"Viene utilizzato per accedere all'elemento Div per applicare le proprietà sotto l'elenco:

• IL "bordo-sinistra"È una proprietà stentata che viene utilizzata per impostare il bordo sinistro dell'elemento.
• "superiore"La proprietà allinea verticalmente l'elemento posizionato.
• "metter il fondo a"Viene utilizzato per allineare il bordo inferiore dell'elemento posizionato.
• "posizioneLa proprietà "è impostata come"assoluto"Per correggere la posizione del contenitore.

Produzione

Abbiamo spiegato la procedura per limitare la lunghezza del bordo in CSS.

Conclusione

Per limitare la lunghezza del confine, in primo luogo, crea un contenitore di div nidificato con l'aiuto del ""Tag. Quindi, accedilo utilizzando la classe o l'ID specifica e applica le proprietà CSS per lo stile. Successivamente, il CSS "Border-Bottom"È utilizzato per impostare il bordo inferiore di un elemento e il"bordo-sinistra"La proprietà aggiunge un bordo sul lato sinistro di un elemento. Questo tutorial ha spiegato come limitare la lunghezza del bordo con CSS.