Korištenje pseudo elemenata
Možete postaviti pseudo element tako da bude ili iza elementa, i veći, čineći efekt obruba s vlastitom pozadinom ili manji i iznutra (ali pripazite da se sadržaj postavi na vrh).
Element koji treba više obruba trebao bi imati vlastiti obrub i relativno pozicioniranje.
.borders ( position: relative; border: 5px solid #f00; )Sekundarni obrub dodaje se pseudo elementom. Postavlja se s apsolutnim pozicioniranjem i umetanjem s gornjim / lijevim / donjim / desnim vrijednostima. Ovo će također imati obrub i zadržavat će se ispod sadržaja (čuvajući, na primjer, mogućnost odabira teksta i klikabilnost veza) davanjem negativne vrijednosti z-indeksa. Oprezno s negativnim z-indeksom, ako je ovo unutar još jednog elementa s vlastitom bojom pozadine, ovo možda neće uspjeti.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Pogledajte olovku gbgRqZ Chrisa Coyiera (@chriscoyier) na CodePenu.
Možete napraviti i treću granicu koristeći :afterpseudo klasu. Posebno uzmite u obzir da Firefox 3 (pre 3.6) to zajebava podržavajući :afteri :before, ali ne dopuštajući im da budu apsolutno postavljeni (pa izgleda čudno).
Koristeći obris
Iako je malo ograničeniji od obruba (obilazi cijeli element bez obzira na sve), obris je dodatna slobodna granica.
.borders ( border: 5px solid blue; outline: 5px solid red; )Korištenje okvira-sjena
Možete upotrijebiti box-shadow za izradu efekta obruba tako što ćete sjenku pomaknuti i imati 0 zamućenja. Osim toga, vrijednostima odvajanja zarezom možete imati onoliko „granica“ koliko želite:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Pogledajte olovku xbgreX Chrisa Coyiera (@chriscoyier) na CodePenu.
Korištenje izrezane pozadine
Možete napraviti pozadinu elementa da se zaustavi prije popunjavanja. Na taj način normalna granica elemenata na neki način može izgledati kao dvostruka granica.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Na ulazu:
Pogledajte efekt Double Double border na Chrisu Coyieru (@chriscoyier) na CodePenu.