Come aggiungere un doppio bordo con colori diversi?
Per aggiungere un doppio bordo su qualsiasi forma utilizzando i CSS, il ' :Prima Il selettore è famoso. Cambia i colori di entrambi i bordi per renderli unici. La procedura passo-passo fornita di seguito per aggiungere un doppio bordo con colori diversi:
Passaggio 1: aggiungi l'elemento Div e assegna le classi
Nel file HTML, aggiungi l'elemento div all'interno del tag
e assegna un ' classe ” con il nome di “ doppio bordo ”. Gli utenti possono anche creare il proprio nome di classe:< div classe = 'doppio bordo' >
< / div >
Passaggio 2: crea tag di stile
In questo passaggio, crea una porzione per la classe ' doppio bordo ” e farne una copia con il “ :Prima ” selettore. In questo modo, le proprietà CSS verranno applicate alle nostre classi:
< stile >
.Doppio- confine {
}
.Doppio- confine :Prima {
}
< / stile >
Passaggio 3: aggiungi stili alla classe
Le proprietà CSS si applicano all'elemento div che ha una classe di ' doppio bordo ”. I seguenti stili sono menzionati di seguito:
.Doppio- confine {
sfondo- colore : #ccc;
confine : 4px verde fisso;
imbottitura: 50px;
larghezza : 16 pixel;
altezza : 16 pixel;
posizione: relativa;
margine: 0 auto;
}
La descrizione delle proprietà CSS è riportata di seguito:
- Innanzitutto, aggiungi ' colore di sfondo ” che è grigio e il “ confine ” di peso 4px e colore verde.
- IL ' imbottitura ” di 50px per creare lo spazio interno di 50px da tutti i lati.
- Alla fine il “ larghezza ' E ' altezza' di 16 pixel. Anche il ' margine ” è 0 auto, il che significa che i margini superiore e inferiore saranno zero e sinistro.
La pagina web ha questo aspetto:
L'output mostra che il bordo è applicato a 'div'.
Passaggio 4: aggiunta del selettore CSS
Ora, spostati verso la seconda casella nel tag di stile che contiene ' :Prima ” selector allegato, e scrivi il codice sottostante:
.Doppio- confine :Prima {sfondo : nessuno;
confine : 4px blu fisso;
contenuto : '' ;
posizione: assoluta;
in alto: 4px;
sinistra: 4px;
destra: 4px;
in basso: 4px;
}
Le proprietà sono spiegate di seguito:
- Usa il ' posizione ” per rendere fissa la posizione di un elemento.
- Dopodiché il “ in alto, a sinistra, a destra e in basso ” definisce il margine dell'elemento appena creato rispetto a quello originale.
- Un selettore CSS chiamato ': Prima ” aggiunge contenuto davanti a un elemento scelto.
L'output è simile a:
È così che è possibile aggiungere un doppio bordo utilizzando colori diversi.
Conclusione
Per aggiungere un doppio bordo, crea prima un elemento div e assegnalo a una classe. Quindi, aggiungi il CSS ' posizione ” proprietà che deve essere impostata su relativa. Successivamente, aggiungi il selettore CSS ':before' in modo che gli utenti possano aggiungere contenuto prima di un elemento scelto. Questa guida ha dimostrato l'uso di doppi bordi con vari colori.