Pseudo elemento (-ų) naudojimas
Pseudo elementą galite pastatyti taip, kad jis būtų arba už elemento, ir didesnis, kad padarytų krašto efektą su savo fonu, arba mažesnis ir viduje (tačiau įsitikinkite, kad turinys patenka į viršų).
Elementas, kuriam reikia kelių sienų, turėtų turėti savo sieną ir santykinę padėtį.
.borders ( position: relative; border: 5px solid #f00; )Antrinė kraštinė pridedama su pseudo elementu. Jis nustatomas su absoliučiu padėties nustatymu ir įterpiamas viršutinės / kairės / apatinės / dešinės vertės. Tai taip pat turės kraštinę ir bus laikoma po turiniu (išsaugant, pavyzdžiui, teksto pasirinkimą ir nuorodų spustelėjimą), suteikiant jam neigiamą z indekso vertę. Atsargiai su neigiamu z indeksu, jei tai yra dar vienas elementas su savo fono spalva, tai gali neveikti.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Žiūrėkite Chriso Coyierio (@chriscoyier) „Pen gbgRqZ“ „CodePen“.
Trečią kraštinę galite padaryti naudodamiesi :afterpseudo klase. Atkreipkite dėmesį, kad „Firefox 3“ (iki 3.6 versijos) tai prisuka remdamas :afterir :before, bet neleisdamas jų visiškai išdėstyti (taigi atrodo keistai).
Naudojant kontūrą
Nors tai yra šiek tiek ribotesnė nei siena (apeina visą elementą, nesvarbu kokia), kontūras yra papildoma nemokama siena.
.borders ( border: 5px solid blue; outline: 5px solid red; )Naudojant „box-shadow“
Galite naudoti „box-shadow“, kad padarytumėte krašto efektą, padarydami šešėlį poslinkiu ir neryškų. Be to, kableliais atskirdami vertes, galite turėti tiek „kraštų“, kiek norite:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Žiūrėkite Chriso Coyier (@chriscoyier) „Pen xbgreX“ svetainėje „CodePen“.
Naudojant iškarpytą foną
Prieš užpildymą galite priversti elemento foną sustoti. Tokiu būdu įprasta elementų siena tam tikra prasme gali atrodyti kaip dviguba siena.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Įvestyje:
Žr. Chriso Coyier'io (@chriscoyier) „Pen Double Pen“ efektą „CodePen“.