A border-image-repeat tulajdonság

A border-image-repeat tulajdonság beállítja a képként megjelenített kerület belső részének ismétlésének módját. Részletesebb információért lásd a border-image tulajdonságot.

Szintaxis

szelektor {
	border-image-repeat: stretch | repeat | round;
}

Értékek

Paraméterek száma	Leírás
`stretch`	Kinyújtja a kerület képét az elem méretéig. Ez az alapértelmezett érték.
`repeat`	Ismétli a kerület képét.
`round`	Ismétli a képet és úgy méretezi, hogy az elem oldalán egész számú kép jelenjen meg.

Alapértelmezett érték: stretch.

Paraméterek száma

1 vagy 2 paramétert fogadhat. Ha két paraméter van megadva, akkor az első a felső és az alsó kerületre vonatkozik, a második pedig a bal és a jobb oldalira.

Példa . A stretch érték

<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;
}

Példa . A repeat érték

<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;
}

Példa . A round érték

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

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

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

Példa . Két érték

repeat érték a szélességre és stretch a magasságra:

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

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

Lásd még

a border-image tulajdonság,
amely a képkerület rövidítése
a border-image-source tulajdonság,
amely megadja a kép elérési útját a kerülethez
a border-image-slice tulajdonság,
amely a kerület képének felosztását határozza meg
a border-image-width tulajdonság,
amely megadja a kép méretét a kerülethez
a border-image-outset tulajdonság,
amely megadja a kép eltolását a kerülethez