Utilizzo di pseudo elementi
Puoi posizionare uno pseudo elemento in modo che sia dietro l'elemento e più grande, creando un effetto bordo con il proprio sfondo, o più piccolo e all'interno (ma assicurati che il contenuto sia posizionato sopra).
L'elemento che necessita di più bordi dovrebbe avere il proprio bordo e posizionamento relativo.
.borders ( position: relative; border: 5px solid #f00; )Il bordo secondario viene aggiunto con uno pseudo elemento. È impostato con posizionamento assoluto e inserto con valori in alto / a sinistra / in basso / a destra. Anche questo avrà un bordo e verrà mantenuto sotto il contenuto (preservando, ad esempio, la selezionabilità del testo e la cliccabilità dei collegamenti) assegnandogli un valore z-index negativo. Attento allo z-index negativo, se questo è all'interno di un altro elemento con il suo colore di sfondo, potrebbe non funzionare.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Guarda la Pen gbgRqZ di Chris Coyier (@chriscoyier) su CodePen.
Puoi anche fare un terzo bordo usando la :afterpseudo classe. Prendi nota in particolare che Firefox 3 (pre 3.6) rovina tutto supportando :aftere :before, ma non permettendo loro di essere posizionati in modo assoluto (quindi sembra strano).
Usando il contorno
Sebbene sia un po 'più limitato del bordo (gira intorno all'intero elemento indipendentemente da cosa), il contorno è un bordo extra libero.
.borders ( border: 5px solid blue; outline: 5px solid red; )Utilizzando box-shadow
Puoi usare box-shadow per creare un effetto di bordo, rendendo l'offset dell'ombra e con 0 sfocatura. Inoltre, separando i valori da virgole, puoi avere tutti i "bordi" che desideri:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Guarda la Pen xbgreX di Chris Coyier (@chriscoyier) su CodePen.
Utilizzando uno sfondo ritagliato
Puoi fare in modo che lo sfondo di un elemento si fermi prima del riempimento. In questo modo un bordo normale di un elemento può sembrare un doppio bordo in un certo senso.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Su un ingresso:
Vedere l'effetto Pen Double border attivato da Chris Coyier (@chriscoyier) su CodePen.