Álelem (ek) használata
Pozícionálhat egy álelemet úgy, hogy az vagy az elem mögött legyen, és nagyobb legyen, a saját hátterével pedig szegélyhatást eredményezzen, vagy kisebb legyen és belül (de ügyeljen arra, hogy a tartalom a tetején legyen).
A több határot igénylő elemnek saját szegéllyel és relatív elhelyezéssel kell rendelkeznie.
.borders ( position: relative; border: 5px solid #f00; )A másodlagos határt egy álelemmel egészítjük ki. Abszolút pozicionálással van beállítva, és be van illesztve felső / bal / alsó / jobb értékekkel. Ennek szintén lesz szegélye, és a tartalom alatt marad (megőrizve például a szöveg kiválaszthatóságát és a linkek kattinthatóságát) azáltal, hogy negatív z-index értéket ad neki. Vigyázz a negatív z-indexre, ha ez még egy elemen belül van, saját háttérszínnel, ez nem biztos, hogy működik.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Lásd Chris Coyier (@chriscoyier) Pen gbgRqZ-jét a CodePen-en.
Megteheti a harmadik szegélyt az :afterálosztály használatával is. Fokozott veszi, hogy a Firefox 3 (pre 3.6) csavarokat ezt fel támogatásával :afterés :before, de nem teszi lehetővé számukra, hogy abszolút pozicionált (így néz ki, fura).
A vázlat használata
Noha egy kicsit korlátozottabb, mint a határ (a teljes elemet körbejárja bármi is), a körvonal egy extra szabad határ.
.borders ( border: 5px solid blue; outline: 5px solid red; )A box-shadow használatával
A box-shadow segítségével határhatás érhető el, az árnyék eltolásával és 0 elmosódásával. Ráadásul vesszővel elválasztva az értékekkel annyi „határ” lehet, amennyit csak akar:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Lásd Chris Coyier (@chriscoyier) Pen xbgreX-jét a CodePen-en.
Vágott háttér használata
Az elem hátterét megállíthatjuk a kitöltés előtt. Így az elemek normális szegélye bizonyos értelemben kettős szegélynek tűnhet.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Egy bemeneten:
Lásd Chris Coyier (@chriscoyier) Pen Double border effektusát a CodePen-en.