Border-image - CSS-triki | Almanah CSS 2025

border-image je stenografska lastnost, ki vam omogoča, da kot obrobo elementa uporabite sliko ali gradient CSS.

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

border-imagePremoženje se lahko uporablja za katero koli element, razen notranjih namiznih elementov (npr tr, th, td), ko border-collapsenaj bi se collapse.

Lastnosti

Edina zahtevana lastnost border-imagestenografije je border-image-source. Druge lastnosti privzeto uporabljajo začetne vrednosti, če niso določene. Po border-imagevrsti so naslednje lastnosti:

`border-image-source`

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

Ta lastnost določa vir za obrobno sliko. To je lahko URL, URI podatkov, preliv CSS ali vstavljeni SVG (čeprav je podpora za vgrajeni SVG omejena, glejte opombe o uporabi SVG).

Začetna vrednost je none.

`border-image-slice`

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

Vrednosti te lastnosti brskalniku povedo, kje naj "razreže" sliko, da ustvari koščke obrobe. Slika je razdeljena na 9 odsekov - štiri vogale, štiri stranice in sredino.

Osem srčkov v "okvirni" sliki, povečani za prikaz podrobnosti. Rdeče črte označujejo rezine.

Če se vam zdi to nesmiselno, ste v dobri družbi. Pred nekaj leti je bila na tem blogu dolgo razpravljana na blogu Erica Myerja, kjer so pretehtali številni razvojni velikani.

V tej predstavitvi se srce ponavlja okoli meje divja. border-image-sourcePosnetek je sestavljen podoba osmih istega srčnega ikone, cepljen tako da je celotna srčaste oblike uporabimo na vsaki strani elementa.

Oglejte si predstavitev Pen border-image: border border by CSS-Tricks (@ css-tricks) na CodePen.

Več opomb o uporabi

Čeprav se je podpora za border-imageizboljšala - v vseh trenutnih različicah brskalnika je podprta brez predpone - nastavitev nadomestnega bordersloga se še vedno splača. Nadomestni rob bo prikazan v brskalnikih, ki ne podpirajo border-image, ali če se slika ne naloži.

Za razliko od nekaterih drugih lastnosti obrob border-imageni mogoče animirati. Prav tako ga ni mogoče oblikovati border-radius.

Če prijavite širino a border-image-sourcein borderširino ali border-image-widthbrez nje, bo celotna slika brez rezin postavljena na štiri vogale elementa, pomanjšana na določeno širino.

Sorodno

border
border-collapse
box-sizing

Več informacij

border-image v modulu CSS za ozadje in meje nivo 3 CR
border-image na MDN
border-image.com, to orodje vam omogoča, da naložite sliko in se igrate z robnimi rezinami, dokler jih ne uredite, nato pa ustvari CSS za vas.
Slika meje pojasnjena s strani Dudley Storey.

Več predstavitev

Tudi od Dudley Storey, Praktična mejna slika: odzivni okvir slike, predstavitev CodePen. To je dober primer smiselne uporabe obrobe na odzivni sliki. Upoštevajte, da je "okvir" odstranjen pri manjših velikostih zaslona.
Resnične pikčaste meje z uporabo SVG in border-image, pisalo Lucasa Lemonnierja. Rešitev za grdo kvadratno "pikčasto" obrobo vam daje ta metoda prave okrogle pike!
gumb za preliv, pisalo uporabnika CodePen GSSxGSS. Lep primer linearnega gradienta kot robne slike.
Filmski trak, pero Nicka Pettita. Morda ne najbolj praktična predstavitev, to je zabaven, umetniški primer tega, s čim se lahko ukvarjate border-image.

Podpora za brskalnik

border-imageprvotno zahtevali predpone prodajalcev v vseh brskalnikih, ki so ga podpirali. Zdaj deluje brez predpone v najnovejši različici vseh brskalnikov. V tej tabeli je prikazana tako zgodnja podpora kot tudi najzgodnejša podpora, kadar je to primerno.