Použití pseudoprvků
Můžete umístit pseudoprvek tak, aby byl buď za prvkem, a větší, čímž vytvoří efekt ohraničení s vlastním pozadím, nebo menší a uvnitř (ale ujistěte se, že je obsah umístěn nahoře).
Prvek, který potřebuje více ohraničení, by měl mít vlastní ohraničení a relativní umístění.
.borders ( position: relative; border: 5px solid #f00; )Sekundární ohraničení je přidáno s pseudoprvkem. Je nastaven s absolutním umístěním a vložen s hodnotami nahoře / vlevo / dole / vpravo. To bude mít také ohraničení a bude udržováno pod obsahem (zachování například volitelnosti textu a klikatelnosti odkazů) tím, že mu bude dána záporná hodnota z-indexu. Opatrně s negativním z-indexem, pokud se jedná o ještě další prvek s vlastní barvou pozadí, nemusí to fungovat.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Podívejte se na Pen gbgRqZ od Chris Coyier (@chriscoyier) na CodePen.
Třetí ohraničení můžete udělat také pomocí :afterpseudo třídy. Zvláštní pozornost věnujte tomu, že Firefox 3 (pre 3.6) to napravuje tím, že podporuje :aftera :before, ale neumožňuje jejich absolutní umístění (takže to vypadá divně).
Pomocí obrysu
I když je to o něco omezenější než ohraničení (jde kolem celého prvku bez ohledu na to, co je), obrys je extra volný okraj.
.borders ( border: 5px solid blue; outline: 5px solid red; )Pomocí box-shadow
Pro vytvoření efektu ohraničení můžete použít rámeček stínování tím, že provedete posun stínu a rozmazání 0. Navíc pomocí hodnot oddělujících čárky můžete mít tolik „hranic“, kolik chcete:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Podívejte se na Pen xbgreX od Chrisa Coyiera (@chriscoyier) na CodePen.
Pomocí oříznutého pozadí
Můžete zastavit pozadí prvku před výplní. Normální ohraničení prvků tak může svým způsobem vypadat jako dvojité ohraničení.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Na vstupu:
Podívejte se na efekt dvojitého ohraničení pera, který vytvořil Chris Coyier (@chriscoyier) na CodePen.