Använda pseudo-element
Du kan placera ett pseudoelement så att det är antingen bakom elementet och större, vilket ger en kanteffekt med sin egen bakgrund eller mindre och inuti (men se till att innehållet placeras ovanpå).
Elementet som behöver flera gränser bör ha sin egen gräns och relativa positionering.
.borders ( position: relative; border: 5px solid #f00; )Den sekundära gränsen läggs till med ett pseudo-element. Den ställs in med absolut positionering och infälld med värdena uppe / vänster / botten / höger. Detta kommer också att ha en kant och hålls under innehållet (bevarar till exempel textens valbarhet och länkbarhet) genom att ge det ett negativt z-indexvärde. Var försiktig med negativt z-index, om detta är inom ännu ett element med sin egen bakgrundsfärg kanske det inte fungerar.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Se Pen gbgRqZ av Chris Coyier (@chriscoyier) på CodePen.
Du kan göra en tredje gräns genom att använda :afterpseudoklassen också. Observera speciellt att Firefox 3 (före 3.6) skruvar upp detta genom att stödja :afteroch :before, men inte låta dem vara helt placerade (så det ser konstigt ut).
Använda disposition
Även om det är lite mer begränsat än gränsen (går runt hela elementet oavsett vad) är konturen en extra fri gräns.
.borders ( border: 5px solid blue; outline: 5px solid red; )Använda box-shadow
Du kan använda box-shadow för att skapa en gränseffekt genom att göra skuggoffset och ha 0 oskärpa. Genom att komma-separera värden kan du dessutom ha så många "gränser" som du vill:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Se pennan xbgreX av Chris Coyier (@chriscoyier) på CodePen.
Använda en klippt bakgrund
Du kan få bakgrunden till ett element att stoppa innan stoppningen. På det sättet kan en element normal gräns se ut som en dubbel gräns på ett sätt.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )På en ingång:
Se Pen Double border-effekten av Chris Coyier (@chriscoyier) på CodePen.