Utilizarea pseudoelementului (elementelor)
Puteți poziționa un pseudoelement astfel încât să fie fie în spatele elementului, cât și mai mare, făcând un efect de margine cu propriul fundal, sau mai mic și interior (dar asigurați-vă că conținutul este poziționat deasupra).
Elementul care are nevoie de mai multe frontiere ar trebui să aibă propria frontieră și poziționarea relativă.
.borders ( position: relative; border: 5px solid #f00; )Bordura secundară este adăugată cu un pseudoelement. Este setat cu poziționare absolută și inserare cu valori sus / stânga / jos / dreapta. Aceasta va avea, de asemenea, o margine și este păstrată sub conținut (păstrând, de exemplu, selectabilitatea textului și posibilitatea de a face clic pe linkuri), dându-i o valoare negativă a indexului z. Atenție cu indicele z negativ, dacă acesta se află încă în alt element cu propria culoare de fundal, este posibil să nu funcționeze.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Vedeți Pen gbgRqZ de Chris Coyier (@chriscoyier) pe CodePen.
Puteți face un al treilea bord folosind și :afterpseudo-clasa. Luați o notă specială că Firefox 3 (pre 3.6) înșurubează acest lucru susținând :afterși :before, dar nu permițându-le să fie poziționate absolut (așa că pare ciudat).
Folosind contur
Deși este puțin mai limitat decât granița (merge în jurul întregului element indiferent de ce) conturul este o graniță liberă suplimentară.
.borders ( border: 5px solid blue; outline: 5px solid red; )Folosind box-shadow
Puteți utiliza box-shadow pentru a face un efect de margine, făcând decalarea umbrelor și să aibă o estompare de 0. În plus, prin separarea valorilor prin virgulă, puteți avea oricâte „chenare” doriți:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Vedeți Pen xbgreX de Chris Coyier (@chriscoyier) pe CodePen.
Folosind un fundal decupat
Puteți face fundalul unui element să se oprească înainte de umplere. În acest fel, o margine normală a elementelor poate arăta într-un fel ca o margine dublă.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Pe o intrare:
Vedeți efectul Pen Double border de Chris Coyier (@chriscoyier) pe CodePen.