Brug af pseudo-element (er)
Du kan placere et pseudo-element således, at det enten er bag elementet og større, hvilket giver en kanteffekt med sin egen baggrund eller mindre og indeni (men sørg for, at indholdet bliver placeret ovenpå).
Elementet, der har brug for flere grænser, skal have sin egen grænse og relative positionering.
.borders ( position: relative; border: 5px solid #f00; )Den sekundære grænse tilføjes med et pseudo-element. Det er indstillet med absolut positionering og indsat med top / venstre / bund / højre værdier. Dette vil også have en kant og holdes under indholdet (bevarer f.eks. Tekstens valgbarhed og klikbarhed på links) ved at give det en negativ z-indeksværdi. Forsigtig med negativt z-indeks, hvis dette er inden for endnu et element med sin egen baggrundsfarve, fungerer dette muligvis ikke.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Se Pen gbgRqZ af Chris Coyier (@chriscoyier) på CodePen.
Du kan også udføre en tredje grænse ved hjælp af :afterpseudoklassen. Vær særlig opmærksom på, at Firefox 3 (før 3.6) skruer dette op ved at støtte :afterog :before, men ikke lade dem placeres absolut (så det ser underligt ud).
Brug af omrids
Mens det er lidt mere begrænset end grænsen (går rundt om hele element uanset hvad), er omrids en ekstra fri grænse.
.borders ( border: 5px solid blue; outline: 5px solid red; )Brug af box-shadow
Du kan bruge box-shadow til at skabe en kanteffekt ved at gøre skyggen forskudt og have 0 sløring. Plus ved at kommaseparere værdier kan du have så mange "grænser" som du vil:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Se pennen xbgreX af Chris Coyier (@chriscoyier) på CodePen.
Brug en klippet baggrund
Du kan få baggrunden for et element til at stoppe før polstringen. På den måde kan en elementers normale grænse ligne en dobbelt grænse på en måde.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )På en indgang:
Se Pen Double border effect on af Chris Coyier (@chriscoyier) på CodePen.