Pseidoelementa (-u) izmantošana
Jūs varat novietot pseido elementu tā, lai tas būtu vai nu aiz elementa, un lielāks, padarot apmales efektu ar paša fonu, vai mazāks un iekšpusē (bet pārliecinieties, ka saturs atrodas augšpusē).
Elementam, kuram nepieciešamas vairākas robežas, jābūt savai robežai un relatīvajai pozicionēšanai.
.borders ( position: relative; border: 5px solid #f00; )Sekundārā apmale tiek pievienota ar pseido elementu. Tas ir iestatīts ar absolūto pozicionēšanu un ievietots ar augšējo / kreiso / apakšējo / labo vērtību. Tam būs arī apmale un tas tiks turēts zem satura (saglabājot, piemēram, teksta atlasāmību un saišu klikšķināmību), piešķirot tam negatīvu z-indeksa vērtību. Uzmanīgi ar negatīvo z indeksu, ja tas atrodas vēl vienā elementā ar savu fona krāsu, tas var nedarboties.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Skatiet Kriss Koijers (@chriscoyier) Pen gbgRqZ vietnē CodePen.
Jūs varat veikt trešo robežu, izmantojot arī :afterpseido klasi. Īpaši ņemiet vērā, ka Firefox 3 (pirms 3.6.) To pieskrūvē, atbalstot :afterun :before, bet neļaujot tiem absolūti novietot (tāpēc tas izskatās dīvaini).
Izmantojot kontūru
Lai gan tas ir nedaudz ierobežotāks nekā robeža (neatkarīgi no tā, kas iet pa visu elementu), kontūra ir papildu bezmaksas robeža.
.borders ( border: 5px solid blue; outline: 5px solid red; )Izmantojot box-shadow
Varat izmantot box-shadow, lai izveidotu apmales efektu, padarot ēnu nobīdi un 0 izplūdušu. Turklāt, atdalot ar komatiem vērtības, jums var būt tik daudz “robežu”, cik vēlaties:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Skatiet Chris Coyier (@chriscoyier) Pen xbgreX vietnē CodePen.
Izmantojot izgrieztu fonu
Pirms polsterējuma jūs varat iestatīt elementa fona apstāšanos. Tādā veidā elementu normāla robeža savā ziņā var izskatīties kā dubultā robeža.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Par ievadi:
Skatiet Chris Coyier (@chriscoyier) Pen Double border efektu vietnē CodePen.