Pseudo-element (en) gebruiken
Je kunt een pseudo-element zo plaatsen dat het ofwel achter het element staat, en groter, waardoor een randeffect ontstaat met zijn eigen achtergrond, of kleiner en binnenin (maar zorg ervoor dat de inhoud bovenaan wordt geplaatst).
Het element dat meerdere randen nodig heeft, moet zijn eigen rand en relatieve positionering hebben.
.borders ( position: relative; border: 5px solid #f00; )De secundaire rand wordt toegevoegd met een pseudo-element. Het is ingesteld met absolute positionering en inzet met waarden boven / links / onder / rechts. Dit heeft ook een rand en wordt onder de inhoud gehouden (met behoud van bijvoorbeeld de selecteerbaarheid van tekst en klikbaarheid van links) door het een negatieve z-indexwaarde te geven. Pas op met een negatieve z-index, als dit zich in weer een ander element met zijn eigen achtergrondkleur bevindt, werkt dit mogelijk niet.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Zie de Pen gbgRqZ door Chris Coyier (@chriscoyier) op CodePen.
U kunt ook een derde rand maken door de :afterpseudo-klasse te gebruiken. Merk in het bijzonder op dat Firefox 3 (pre 3.6) dit verknoeit door ze te ondersteunen :afteren :before, maar niet toe te staan om absoluut gepositioneerd te worden (dus het ziet er raar uit).
Met behulp van omtrek
Hoewel het een beetje beperkter is dan de rand (gaat om het hele element heen, wat er ook gebeurt), is de omtrek een extra vrije rand.
.borders ( border: 5px solid blue; outline: 5px solid red; )Box-shadow gebruiken
U kunt box-shadow gebruiken om een randeffect te maken, door de schaduw te verschuiven en 0 te laten vervagen. Bovendien kunt u door waarden te scheiden door komma's zoveel "randen" gebruiken als u wilt:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Zie de Pen xbgreX door Chris Coyier (@chriscoyier) op CodePen.
Met een afgeknipte achtergrond
U kunt de achtergrond van een element laten stoppen voor de opvulling. Op die manier kan een normale rand van een element er in zekere zin uitzien als een dubbele rand.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Op een ingang:
Zie het Pen Double border-effect op door Chris Coyier (@chriscoyier) op CodePen.