Határkép - CSS-trükkök | CSS Almanach 2025

border-image egy rövidített tulajdonság, amely lehetővé teszi egy kép vagy CSS színátmenet használatát az elem szegélyeként.

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

A border-imagetulajdonság bármely elemre alkalmazható, kivéve a belső tábla elemeket (pl. Tr, th, td), ha border-collapseaz értéke collapse.

Tulajdonságok

A border-imagegyorsíráshoz csak az szükséges tulajdonság border-image-source. Ha a többi tulajdonság nincs megadva, akkor a többi tulajdonság alapértelmezés szerint a kezdeti értéket képviseli. Ezek a border-imagetulajdonságok sorrendben:

`border-image-source`

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

Ez a tulajdonság megadja a szegélykép forrását. Ez lehet URL, adat URI, CSS színátmenet vagy inline SVG (bár az inline SVG támogatása korlátozott, lásd: SVG használati megjegyzések).

A kezdeti érték none.

`border-image-slice`

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

Ennek a tulajdonságnak az értékei megmondják a böngészőnek, hová "szeletelje" a képet a szegmens darabjainak létrehozásához. A kép 9 részre oszlik - a négy sarokra, a négy oldalra és a középre.

Nyolc szív „keret” képben, a részletekre kinagyítva. A piros vonalak szeleteket jelölnek.

Ha úgy gondolja, hogy ez utólag hangzik, jó társaságban van. Néhány évvel ezelőtt Eric Myer blogjában hosszasan megvitatták a témát, ahol számos frontend fejlesztői nagy mérlegelt.

Ebben a bemutatóban egy szív megismétlődik a div határán. A border-image-sourcekép ugyanazon szív ikon nyolcának összetett képe, szeletelve úgy, hogy a teljes szív alakú legyen az elem mindkét oldalán.

Lásd a Pen border-image demo: icon border by CSS-Tricks (@ css-tricks) a CodePen-en.

További használati megjegyzések

Noha a (z) támogatása border-imagejavult - az összes böngésző jelenlegi verziójában előre nem rögzített -, a tartalék borderstílus beállítása mégis érdemes. A tartalék szegély megjelenik olyan böngészőkben, amelyek nem támogatják border-image, vagy ha a kép betöltése nem sikerül.

A többi szegélytulajdonságtól eltérően border-imagenem animálható. Ez sem stílusozható border-radius.

Ha a border-image-sourceés borderszélességet ad meg, vagy border-image-widthszeletek nélkül, akkor a teljes nem szétvágott kép az elem négy sarkába kerül, a megadott szélességre méretezve.

Összefüggő

border
border-collapse
box-sizing

Több információ

border-image a CSS háttér és határok modul CR 3. szintjén
border-image az MDN-nél
border-image.com, ez az eszköz lehetővé teszi, hogy feltöltsön egy képet, és addig játszhasson a szegélyszeletekkel, amíg rendbe nem kerülnek, majd elkészíti az Ön számára a CSS-t.
Határkép magyarázata Dudley Storey-tól.

További Demók

Dudley Storeytól is, Praktikus határkép: érzékeny képkeret, CodePen bemutató. Ez jó példa arra, hogy a határképeket ésszerűen használjuk egy reszponzív képen. Vegye figyelembe, hogy a „keretet” kisebb képernyőméreteknél eltávolítják.
Igaz pontozott szegélyek SVG és border-image segítségével, Lucas Lemonnier tollával. Megoldás a csúnya négyzet alakú „pontozott” szegélyre, ez a módszer igazi kerek pontokat ad!
színátmenet gomb, egy toll a CodePen felhasználó GSSxGSS-től. Szép példa a lineáris gradiensre mint szegélyképre.
Filmszalag, Nick Pettit tolla. Talán nem a legpraktikusabb bemutató, ez egy szórakoztató, divatos példa arra, hogy mire képes border-image.

Böngésző támogatás

border-imageeredetileg szállító előtagokat igényelt minden támogató böngészőben. Most előre nem javítva működik az összes böngésző legújabb verziójában. Ez a táblázat bemutatja a legkorábbi előtagot és a legkorábbi előtag nélküli támaszt is, ahol alkalmazható.