Il bordo è una delle fantastiche proprietà dei CS che viene utilizzata per specificare il confine dell'elemento. CSS consente agli sviluppatori di aggiungere bordi attorno all'elemento con l'aiuto di "confine" proprietà. Inoltre, gli utenti possono applicare più di un bordo attorno all'elemento con gli stessi colori e colori diversi usando ":Prima" E ":Dopo"Selettori CSS.

Questo tutorial ti insegnerà ad applicare il doppio bordo con colori diversi utilizzando le proprietà CSS.

Come applicare il doppio bordo con colori diversi in CSS?

Per applicare il doppio bordo con colori diversi, controlla le istruzioni fornite.

Passaggio 1: inserire l'intestazione

Inizialmente, inserire un tag di intestazione usando "

"Tag. Questo tag viene utilizzato per specificare l'intestazione del livello uno.

Passaggio 2: crea un contenitore di div

Successivamente, crea un contenitore div con l'aiuto di ""Tag. All'interno del tag DIV, aggiungi una classe "doppio confine".

Passaggio 3: aggiungi il testo nel paragrafo

Quindi, utilizza il "

"Elemento e assegnarlo una classe"confine". Successivamente, incorporare il testo tra il "

Linuxhint Ltd UK

LinuxHint fornisce il contenuto per varie categorie, tra cui Docker, HTML/CSS, Discord, PowerShell, Windows, GitHub e molti altri.

Si può osservare che il testo nel paragrafo è stato aggiunto con successo:

Passaggio 4: accedere all'elemento "div"

Ora accedi al contenitore "Div" con l'aiuto della classe assegnata ".doppio confine".

Passaggio 5: Aggiungi bordo singolo

Per aggiungere un singolo bordo, applica le proprietà fornite:

.doppio confine
Posizione: relativo;
Background-color: RGB (59, 194, 247);
Bordo: 4px Solid RGB (255, 113, 113);
imbottitura: 1em;
Margine: 0 Auto;
Altezza: 10em;
larghezza: 14em;

Nel blocco del codice dato:

• "posizione"Specifica la posizione dell'elemento. Ad esempio, abbiamo impostato il "parente"Posizione per posizionarlo rispetto alla sua posizione normale.
• "colore di sfondo"Proprietà utilizzata per impostare il colore degli elementi dal retro.
• "confine"È usato per allocare un limite attorno all'elemento.
• "imbottitura"Specifica uno spazio attorno al contenuto dell'elemento.
• "margine"Assegna lo spazio vuoto attorno al confine dell'elemento definito.
• "altezza"Definisce l'altezza dell'elemento.
• "larghezza"Specifica per l'impostazione della dimensione della larghezza dell'elemento.

Di conseguenza, il bordo verrà aggiunto in questo modo:

Passaggio 6: aggiungi il doppio bordo

Ora, accedi alla classe con l'aiuto del nome della classe insieme al ":Prima"Selettore. Successivamente, applica le seguenti proprietà:

.doppio confine: prima di
Background: nessuno;
Bordo: 4px Solid RGB (19, 18, 18);
contenuto: "";
blocco di visualizzazione;
Posizione: assoluto;
Top: 5px;
A sinistra: 5px;
a destra: 5px;
In basso: 5px;

La descrizione delle proprietà sopra codificate è la seguente:

• "confine"La proprietà viene utilizzata qui per inserire un altro bordo attorno all'elemento. Qui, il "RGB"Il valore assegna un colore diverso al bordo.
• IL "contenutoLa proprietà "viene utilizzata con il":Prima" E ": dopoR ”pseudo-elementi per l'inserimento dei materiali creati.
• "Schermo"Determina come appare un elemento.
• Qui, "posizione"È impostato come"assoluto", Che significa che la posizione è fissa o assoluta.
• "superiore"La proprietà definisce la posizione superiore dell'elemento.
• "Sinistra"Specifica la posizione dell'elemento sul lato sinistro.
• "Giusto"Viene utilizzato per specificare la posizione giusta di un elemento.
• "metter il fondo a"Viene utilizzato per specificare la posizione inferiore di un elemento:

Si può osservare che abbiamo aggiunto con successo il doppio bordo attorno all'elemento.

Conclusione

Per applicare il doppio bordo con colori diversi in CSS, prima, creare un contenitore di div e assegnargli una classe "doppio bordo". Successivamente, accedi all'elemento per classe e applica le proprietà CSS, tra cui "confine","posizione" COME "parente" e altri. Quindi, accedi di nuovo all'elemento per nome di classe insieme a ":Prima"Selettore e applicare il"confine"Proprietà con la posizione come"assoluto". Questo post ti ha insegnato il metodo per applicare doppi bordi con colori diversi in CSS.