Bruke pseudo-element (er)
Du kan plassere et pseudo-element slik at det enten er bak elementet og større, og gir en kanteffekt med egen bakgrunn eller mindre og innvendig (men sørg for at innholdet blir plassert på toppen).
Elementet som trenger flere grenser bør ha sin egen grense og relative posisjonering.
.borders ( position: relative; border: 5px solid #f00; )Den sekundære grensen er lagt til med et pseudo-element. Den er satt med absolutt posisjonering og innfelt med topp / venstre / bunn / høyre verdier. Dette vil også ha en grense og holdes under innholdet (bevare for eksempel valgbarhet for tekst og klikkbarhet for lenker) ved å gi den en negativ z-indeksverdi. Forsiktig med negativ z-indeks, hvis dette er innenfor enda et element med sin egen bakgrunnsfarge, kan dette ikke fungere.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Se pennen gbgRqZ av Chris Coyier (@chriscoyier) på CodePen.
Du kan gjøre en tredje grense ved å bruke :afterpseudoklassen også. Vær spesielt oppmerksom på at Firefox 3 (pre 3.6) skruer opp dette ved å støtte :afterog :before, men ikke la dem være absolutt plassert (så det ser rart ut).
Bruker disposisjon
Selv om det er litt mer begrenset enn grensen (går rundt hele elementet uansett hva), er omrisset en ekstra fri grense.
.borders ( border: 5px solid blue; outline: 5px solid red; )Bruke bokseskygge
Du kan bruke boksskygge for å lage en grenseeffekt ved å gjøre skyggen forskjøvet og ha 0 uskarphet. I tillegg kan du, ved å skille mellom kommaer, ha så mange "grenser" 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 av Chris Coyier (@chriscoyier) på CodePen.
Bruker en klippet bakgrunn
Du kan få bakgrunnen til et element til å stoppe før polstringen. På den måten kan en elementets normale grense på en måte se ut som en dobbel grense.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )På en inngang:
Se Pen Double border effect on av Chris Coyier (@chriscoyier) på CodePen.