Reunuskuva - CSS-temppuja | CSS-almanakka 2025

border-image on lyhyt ominaisuus, jonka avulla kuvan tai CSS-liukuvärin voi käyttää elementin reunana.

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

border-imageOminaisuus voidaan soveltaa mihin tahansa elementtiin, paitsi sisäinen taulukko elementtejä (esim tr, th, td), kun border-collapseon asetettu collapse.

Ominaisuudet

Ainoa vaadittu ominaisuus border-imagelyhenteeseen on border-image-source. Muiden ominaisuuksien oletusarvo on alkuarvo, jos niitä ei määritetä. Nämä ovat border-imageominaisuuksia järjestyksessä:

`border-image-source`

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

Tämä ominaisuus määrittää reunuskuvan lähteen. Tämä voi olla URL-osoite, data-URI, CSS-gradientti tai upotettu SVG (vaikka tuki on rajallista sisäiselle SVG: lle, katso SVG: n käyttöhuomautukset).

Alkuperäinen arvo on none.

`border-image-slice`

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

Tämän ominaisuuden arvot kertovat selaimelle, mihin kuva "leikata", jotta reunan osat voidaan luoda. Kuva on jaettu 9 osaan - neljä kulmaa, neljä sivua ja keskiosa.

Kahdeksan sydäntä "kehys" -kuvassa, suurennettu näyttämään yksityiskohdat. Punaiset viivat osoittavat viipaleita.

Jos luulet, että se kuulostaa nöyrältä, olet hyvässä seurassa. Muutama vuosi sitten keskusteltiin aiheesta pitkään Eric Myerin blogissa, jossa monet käyttöliittymän kehittäjät punnitsivat.

Tässä esittelyssä sydän toistuu divin rajan ympärillä. border-image-sourceKuva on yhdistetty kuva kahdeksan saman sydänkuvake, viipaloitu niin, että koko sydämen muotoon käytetään kummallakin puolella elementin.

Katso CSS-Tricksin (@ css-tricks) kynän reunakuvan esittely: kuvakkeen reunus CodePenissä.

Lisää käyttöohjeita

Vaikka tuki käyttäjälle border-imageon parantunut - sitä tuetaan etuliitettynä kaikissa nykyisissä selainversioissa - varatyylin asettaminen borderon silti kannattavaa. Vararajasi näkyy selaimissa, jotka eivät tue border-imagetai jos kuvaa ei voi ladata.

Toisin kuin jotkut muut reunusominaisuudet, border-imagesitä ei voida animoida. Sitä ei voi myöskään muotoilla border-radius.

Jos ilmoitat a border-image-sourceja borderleveyden tai border-image-widthilman viipaleita, koko viilaton kuva sijoitetaan elementin neljään kulmaan skaalattuna määrittämäsi leveydelle.

Liittyvät

border
border-collapse
box-sizing

Lisää tietoa

border-image CSS: n tausta- ja rajamoduulin tason 3 CR: ssä
border-image osoitteessa MDN
border-image.com, tämän työkalun avulla voit ladata kuvan ja pelata reunaviipaleilla, kunnes saat ne oikein, ja se luo sitten CSS: n sinulle.
Rajakuva selitetty Dudley Storeylta.

Lisää demoja

Myös Dudley Storeylta, Käytännön reunakuva: herkkä kuvakehys, CodePen-esittely. Tämä on hyvä esimerkki reunakuvan järkevästä käytöstä reagoivassa kuvassa. Huomaa, että "kehys" poistetaan pienemmissä ruuduissa.
Todelliset pisteviivat, joissa on SVG ja border-image, Lucas Lemonnierin kynä. Ratkaisu ruma neliö "pisteviiva" raja, tämä menetelmä antaa sinulle todellisia pyöreitä pisteitä!
kaltevuuspainike, CodePen-käyttäjän kynä GSSxGSS. Kaunis esimerkki lineaarisesta liukuväristä reunakuvana.
Film Strip, Nick Pettitin kynä. Ehkä ei käytännöllisin esittely, tämä on hauska, taitava esimerkki siitä, mitä voit tehdä border-image.

Selaimen tuki

border-imagealun perin vaati toimittajan etuliitteitä kaikissa sitä tukevissa selaimissa. Nyt se toimii esiasentamattomana kaikkien selainten uusimmassa versiossa. Tämä taulukko näyttää sekä aikaisimman etuliitetyn tuen että varhaisimman etuliitetyn tuen tarvittaessa.