Pseudoelemendi (de) kasutamine
Võite paigutada pseudoelemendi nii, et see oleks kas elemendi taga ja suurem, tehes ääriseefekti omaenda taustaga või väiksema ja seespoole (kuid veenduge, et sisu oleks üleval).
Mitut piiri vajaval elemendil peaks olema oma piir ja suhteline positsioneerimine.
.borders ( position: relative; border: 5px solid #f00; )Sekundaarne piir lisatakse pseudoelemendiga. See on seatud absoluutse positsioneerimisega ja sisestatud ülemise / vasaku / alumise / parema väärtusega. Sellel on ka piir ja see jääb sisu alla (säilitades näiteks teksti valitavuse ja linkide klikitavuse), andes sellele negatiivse z-indeksi väärtuse. Negatiivse z-indeksiga on ettevaatlik, kui see asub veel ühes oma taustavärviga elemendis, ei pruugi see toimida.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Vaadake Code Cenilt Chris Coyieri (@chriscoyier) Pen gbgRqZ-i.
Kolmanda piiri saate teha ka :afterpseudoklassi abil . Pange tähele, et Firefox 3 (enne 3.6) kruvib selle üles, toetades :afterja :before, kuid mitte lubades neil absoluutselt asetada (nii et see tundub imelik).
Kontuuri kasutamine
Ehkki see on natuke piiratum kui piir (käib kogu elemendi ümber, olenemata sellest), on kontuur täiendav tasuta piir.
.borders ( border: 5px solid blue; outline: 5px solid red; )Kasti-varju kasutamine
Ruuduefekti saamiseks võite kasutada box-shadow'i, muutes varju nihke ja 0 hägususe. Lisaks saab komaga eraldatud väärtuste arvul olla nii palju „piire“ kui soovite:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Vaadake Code Cenilt Chris Coyieri (@chriscoyier) Pen xbgreX-i.
Lõigatud tausta kasutamine
Saate panna elemendi tausta enne polsterdamist peatuma. Nii võib elementide tavaline piir omamoodi välja näha kahekordse piirina.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Sisendil:
Vaadake Chris Coyieri (@chriscoyier) pliiatsi topeltpiiri efekti CodePenis.