Používanie pseudo prvkov
Pseudoelement môžete umiestniť tak, aby bol buď za elementom, a aby bol väčší, aby mal okrajový efekt s vlastným pozadím, alebo aby bol menší a vnútri (ale obsah musí byť umiestnený navrchu).
Element vyžadujúci viac ohraničení by mal mať svoje vlastné ohraničenie a relatívne umiestnenie.
.borders ( position: relative; border: 5px solid #f00; )Sekundárne ohraničenie je doplnené pseudoprvkom. Je nastavený na absolútne umiestnenie a vložený s hornými / ľavými / spodnými / pravými hodnotami. Toto bude mať tiež orámovanie a bude sa udržiavať pod obsahom (zachováva napríklad výbernosť textu a klikateľnosť odkazov) tým, že mu bude pridelená záporná hodnota z-indexu. Pozor pri negatívnom z-indexe, ak je tento v rámci iného prvku s vlastnou farbou pozadia, nemusí to fungovať.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Prezrite si pero gbgRqZ od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
Tretie ohraničenie môžete urobiť aj pomocou :afterpseudo triedy. Osobitne si všimnite, že Firefox 3 (pre 3.6) to napravuje tak, že podporuje :aftera :before, ale neumožňuje ich absolútne umiestnenie (vyzerá to čudne).
Pomocou obrysu
Aj keď je to o niečo obmedzenejšie ako ohraničenie (obchádza celý prvok bez ohľadu na to, čo je), obrys predstavuje extra voľné ohraničenie.
.borders ( border: 5px solid blue; outline: 5px solid red; )Pomocou box-tieňa
Na vytvorenie efektu orámovania môžete použiť rámček tieň tak, že urobíte offset tieňa a urobíte 0 rozmazaní. Navyše, pomocou hodnôt oddeľujúcich čiarky môžete mať toľko okrajov, koľko chcete:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Prezrite si pero xbgreX od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
Pomocou orezaného pozadia
Môžete nechať pozadie prvku zastaviť pred výplňou. Takto môže normálne ohraničenie prvkov vyzerať svojím spôsobom ako dvojité ohraničenie.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Na vstupe:
Pozrite sa na efekt dvojitého ohraničenia pera, ktorý vytvoril Chris Coyier (@chriscoyier) na stránkach CodePen.