Piiripilt - CSS-trikid | CSS-i almanahh 2025

border-image on lühike omadus, mis võimaldab teil pildi või CSS-i gradienti kasutada elemendi piirina.

.module ( border-image: url(border.png.webp) 25 25 round; )

border-imageVara saab rakendada mis tahes element, välja arvatud sisemised tabeli elemente (nt tr, th, td) kui border-collapseon seatud collapse.

Atribuudid

Ainus nõutav vara, mis border-imagelühikirjelduse jaoks on border-image-source. Teiste omaduste vaikeväärtus on nende algväärtus, kui neid pole määratud. Need on border-imagejärjestused:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

See omadus määrab äärise pildi allika. See võib olla URL, andmete URI, CSS-i gradient või sisemine SVG (kuigi sisemise SVG-i tugi on piiratud, vaadake SVG-i kasutamise märkusi).

Esialgne väärtus on none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Selle atribuudi väärtused ütlevad brauserile, kuhu pilti piiri viilude loomiseks viilutada. Pilt on jagatud 9 osaks - neli nurka, neli külge ja keskosa.

Kaheksa südant kaadripildil, suurendatud detailide kuvamiseks. Punased jooned tähistavad viilusid.

Kui arvate, et see kõlab ebalevalt, olete heas seltskonnas. Mõni aasta tagasi peeti Eric Myeri ajaveebis seda teemat pikalt, kus kaalusid paljud eesliidese arendamise suurkujud.

Selles demos kordub süda ümber div piiri. border-image-sourcePilt on liitpildina kaheksa sama südame ikoon, viilutatud, nii et kogu südame kuju kasutatakse mõlemal pool element.

Vaadake CodePenil pliiatsi piiri pildi demo: ikoonipiiri CSS-Tricks (@ css-tricks) poolt.

Rohkem kasutusjuhendeid

Kuigi tugi border-imagedomeenile on paranenud - seda toetatakse kõigis praegustes brauseriversioonides eeltäidetult, on varutüübi seadmine bordersiiski väärt. Teie varupiir kuvatakse brauserites, mis ei toeta border-imagevõi kui pilti ei õnnestu laadida.

Erinevalt mõnest teisest ääreomadusest border-imageei saa seda animeerida. Samuti ei saa seda kujundada border-radius.

Kui deklareerite a border-image-sourceja borderlaiuse või border-image-widthilma viiludeta, paigutatakse kogu viilutamata pilt elemendi nelja nurka, skaleerides teie määratud laiusele.

Seotud

border
border-collapse
box-sizing

Rohkem informatsiooni

border-image CSSi taust- ja piirimooduli 3. taseme CR-s
border-image juures MDN
border-image.com, see tööriist võimaldab teil üles laadida pildi ja mängida äärisviiludega, kuni saate need õigeks, seejärel loob see teie jaoks CSS-i.
Piiripilt selgitatud Dudley Storeylt.

Veel demosid

Samuti Dudley Storey, praktiline piiripilt: tundlik pildiraam, CodePeni demo. See on hea näide piiripildi mõistlikust kasutamisest reageerival pildil. Pange tähele, et väiksema ekraanisuuruse korral eemaldatakse raam.
Tõelised punktiirjooned, kasutades SVG ja border-image, Lucas Lemonnieri pliiatsit. Inetu ruudukujulise "punktiiriga" piiri lahendus, see meetod annab teile tõelised ümmargused punktid!
gradientnupp, CodePeni kasutaja GSSxGSS pliiats. Ilus näide lineaarsest gradiendist kui piiripildist.
Filmiriba, Nick Pettiti sulepea. Võib-olla mitte kõige praktilisem demo, see on lõbus ja stiilne näide sellest, mida saate teha border-image.

Brauseri tugi

border-imagealgselt nõudis müüja eesliiteid kõigis seda toetavates brauserites. Nüüd töötab see kõigi brauserite uusimas versioonis prefiksitult. See tabel näitab vajaduse korral nii kõige varasemat eesliidet kui ka kõige varasemat prefiksitut tuge.