Uporaba psevdo elementov
Psevdo element lahko postavite tako, da je bodisi za elementom bodisi večji, tako da ustvari učinek obrobe s svojim ozadjem ali manjši in znotraj (vendar poskrbite, da bo vsebina postavljena na vrh).
Element, ki potrebuje več obrob, mora imeti svojo mejo in relativno pozicioniranje.
.borders ( position: relative; border: 5px solid #f00; )Sekundarna obroba je dodana s psevdo elementom. Nastavi se z absolutnim pozicioniranjem in vstavitvijo z vrednostmi zgoraj / levo / spodaj / desno. Ta bo imel tudi obrobo in se bo ohranil pod vsebino (ohrani, na primer, izbirnost besedila in klikljivost povezav), tako da ji da negativno vrednost indeksa z. Previdno pri negativnem z-indeksu, če je ta znotraj še enega elementa z lastno barvo ozadja, to morda ne bo delovalo.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Oglejte si Pen gbgRqZ Chrisa Coyierja (@chriscoyier) na CodePen.
Tretjo obrobo lahko naredite tudi z uporabo :afterpsevdo razreda. Posebej bodite pozorni, da Firefox 3 (pred 3.6) to privije tako, da podpira :afterin :before, vendar ne dovoli, da bi bili popolnoma postavljeni (zato izgleda čudno).
Uporaba orisa
Čeprav je nekoliko bolj omejen od obrobe (obkroža celoten element ne glede na vse), je obris dodatna prosta obroba.
.borders ( border: 5px solid blue; outline: 5px solid red; )Uporaba box-shadow
S poljubno senco lahko naredite učinek obrobe, tako da senco premaknete in imate 0 zameglitev. Poleg tega lahko z vrednostmi, ločenimi z vejico, poljubno "obrobe":
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Oglejte si Pen xbgreX Chrisa Coyierja (@chriscoyier) na CodePen.
Uporaba odrezanega ozadja
Ozadje elementa lahko ustavite pred oblazinjenjem. Tako lahko običajna obroba elementov na nek način izgleda kot dvojna obroba.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Na vhodu:
Oglejte si učinek dvojne obrobe pisala Chris Coyier (@chriscoyier) na CodePen.