A border-image tulajdonság

A border-image tulajdonság egy képet állít be a kerethez, és egy rövidítő tulajdonság a border-image-source, border-image-slice, border-image-repeat, border-image-width és a border-image-outset tulajdonságok számára. Miközben a rövidítő tulajdonság korábban jelent meg a CSS-ben, mint a rövidített tulajdonságok, ezért több régi böngészőben is támogatott.

Szintaxis

szelektor {
	border-image: url(kép elérési útja) eltolás/vastagság/eltolás ismétlés;
}

Leírás

A kép, amelyet a kerethez szeretnénk alkalmazni, különleges módon kell, hogy legyen kialakítva: 4 mini kép a sarkokhoz és 4 kép az oldalakhoz. Példa egy ilyen képére:

Ebben az esetben a középső rész fehér marad (mivel nem szeretnénk, hogy az kerüljön az elem hátterére). Példa egy kitöltött középső résszel rendelkező képére:

A slice érték megmondja a böngészőnek, hogy a kép mely részei kerüljenek a sarkokra, és melyek az oldalakra (és melyik rész lesz a középső). A sarkokra 4 rész kerül, az oldalakra 4 rész kerül és egy rész (a középső) kerül az elem hátterére (opcionálisan, a fill kulcsszó).

A kép a következő módon van "felvágva" darabokra: a slice értékhez egy négy érték van megadva. Elemezzünk egy példán. Tegyük fel, hogy a következő értékek vannak megadva: 10 20 30 40 (a pixelek px nincsenek megadva, ez amiatt van, mert a kép lehet raszteres és vektorgrafikus is). Az értékek a következőt jelentik: 10 levágni felülről, 20 levágni jobbról, 30 levágni alulról, 40 levágni balról. A kép mely része kerül a bal felső sarokba? Ez lesz a darab: 10 felülről, 40 balról. A jobb felső sarokba 10 felülről, 20 jobbról kerül. És így tovább.

Leggyakrabban a kép szimmetrikus (mint a fenti rombuszok) és egyenlő darabokat kell levágni a sarkokra. Ebben az esetben egy érték van megadva, amely minden oldalról azonos eltolást határoz meg. Ahhoz, hogy levágjuk a narancs rombuszokat, a slice értékét 26-ra állítjuk (mivel a narancs rombusz mérete 26px × 26px). A sárga rombuszok a keret vonalaira kerülnek, és a következő történik velük: vagy ki fognak nyúlni az egész blokkra, vagy ismétlődni fognak a keret mentén (a repeat értékétől függően):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

A border-image tulajdonság nem engedi meg az elem keretének vastagságának megadását. A böngésző egyszerűen kinyújtja a képet a keret mentén a meglévő szélességgel. Ezért azt a border tulajdonsággal kell beállítani.

A régi böngészők felhasználói (vagy a letiltott képekkel) a border-ben megadott szabványos keretet fogják látni, ezért érdemes annak megfelelő stílust és színt beállítani.

Értékek

Érték	Leírás
url(Kép elérési útja)	A kép elérési útja. Részletesebben lásd a `border-image-source`-t.
eltolás	Megmondja a böngészőnek, hogy a kép mely részei kerüljenek a sarkokra, és melyek az oldalakra (és melyik rész lesz a középső). Lehetséges értékek: `1`-től `4` számig \| `1`-től `4` százalékig. Szóközzel elválasztva megadható a `fill` kulcsszó a számok vagy százalékok mellett. Részletesebben lásd a `border-image-slice`-t.
vastagság	A tulajdonság a keret látható részének szélességét irányítja, azt méretezi. Ha ez az érték nagyobb, mint a `border-width` szélessége, a keret képe belóg a tartalom alá. Lehetséges értékek: CSS egységek \| százalékok \| szám \| `auto`. Részletesebben lásd a `border-image-width`-t.
eltolás	Érdekes tulajdonság, amely lehetővé teszi a keret eltolását az elemen kívülre. Negatív értékek nem támogatottak. Lehetséges értékek: CSS egységek (% kivételével (?)) \| pozitív szám \| auto. Részletesebben lásd a `border-image-outset`-t.
ismétlés	Megadja, hogyan kell ismételni a képet a kereteken (nem a sarkokon): mozaikolni vagy nyújtani. Lehetséges értékek: `stretch` \| `repeat` \| `round` \| `space`. Részletesebben lásd a `border-image-repeat`-t.

Alapértelmezett érték: none 100%/1/0 stretch (url(kép elérési útja) eltolás/vastagság/eltolás ismétlés).

Példa . border-image-repeat: repeat érték

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Példa . border-image-repeat: stretch érték

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Példa . border-image-repeat: round érték

Jelenleg normál állapotban a repeat érték van beállítva, ráállításkor pedig a round érték. Figyeld meg, hogy ráállítás előtt a keretbe nem egész számú rombusz fér el, ráállítás után pedig - egész. Így működik a round:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Példa . border-image-repeat: két szó

repeat érték a szélességhez és stretch érték a magassághoz:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Példa . A kép szélességének egyezése a keret szélességével

Növeljük meg a border-width értékét ráállításkor, miközben a border-image vastagságát ugyanannyiban hagyjuk. A rombuszok kinyúlnak az egész keretre:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Példa . border-image-slice

Vegyünk egy másik képet, amelyben a különböző darabok nem egyenlőek:

Adjuk meg, hogy a kép mely részeit kell levágni - 25% 30% 10% 20%. Ez így működik: 25% - felső eltolás, 30% - jobb oldali eltolás, 10% - alsó eltolás, 20% - bal oldali eltolás. Lényegében ezekkel a darabokkal levágjuk a sarkokat. A bal felső sarok 25% lesz felülről a képből, és 20% balról. A jobb felső sarok 25% lesz felülről a képből, és 30% jobbról, és így tovább.

Szintén, ha rávisszük az egeret a blokkra, akkor a fill kulcsszó érvényesül, és a kép középső része lesz a blokkunk háttere:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Példa

Készítsünk gradienst keretet egy lineáris gradiens segítségével:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Példa . border-image-width

Állítsuk a border-image-width értékét 2-re (a keret képe 2-szeresére nő a keretnél), amikor az egeret rávisszük az elemre (26/2 - a perjel után van megadva, miközben a 26 a border-image-slice értéke). Figyeld meg, hogy maga a keret nem nőtt meg, de a keret képe - igen, és ezért a szöveg alá fog lógni:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Példa . border-image-outset

Állítsuk a border-image-outset értékét 3-ra, amikor az egeret rávisszük az elemre. (26/1/2 - a második perjel után van megadva, miközben a 26 a border-image-slice értéke, és a 1 a border-image-width értéke):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Lásd még

a border-image-source tulajdonság,
amely a keret képének elérési útját adja meg
a border-image-slice tulajdonság,
amely a keret képének felosztását adja meg
a border-image-repeat tulajdonság,
amely a keret képének ismétlését adja meg
a border-image-width tulajdonság,
amely a keret képének méretét adja meg
a border-image-outset tulajdonság,
amely a keret képének eltolását adja meg