Vlastnosť border-image-repeat

Vlastnosť border-image-repeat nastavuje spôsob opakovania vnútornej časti ohraničenia v podobe obrázka. Pre podrobnejšie informácie pozri vlastnosť border-image.

Syntax

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

Hodnoty

Počet parametrov	Popis
`stretch`	Natiahne vzor ohraničenia do rozmerov elementu. Táto hodnota sa používa ako predvolená.
`repeat`	Opakuje vzor ohraničenia.
`round`	Opakuje vzor a škáluje ho tak, aby na strane elementu bolo celé číslo obrázkov.

Predvolená hodnota: stretch.

Počet parametrov

Môže prijať 1 alebo 2 parametre. Ak sú zadané dva parametre, tak prvý z nich bude pre horné a dolné ohraničenie, a druhý parameter - pre ľavé a pravé.

Príklad . Hodnota stretch

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

Príklad . Hodnota repeat

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

Príklad . Hodnota round

Teraz je v normálnom stave nastavená hodnota repeat, a pri prejdení myšou - round. Všimnite si, že pred prejdením sa do ohraničenia zmestí nie celé množstvo kosoštvorcov, ale po prejdení - celé. Tak funguje 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;
}

Príklad . Dve slová

Hodnota repeat pre šírku a stretch pre výšku:

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

Pozri tiež

vlastnosť border-image,
ktorá je skratkou pre ohraničenie-obrázok
vlastnosť border-image-source,
ktorá nastavuje cestu k obrázku pre ohraničenie
vlastnosť border-image-slice,
ktorá rozdeľuje obrázok pre ohraničenie
vlastnosť border-image-width,
ktorá nastavuje veľkosť obrázku pre ohraničenie
vlastnosť border-image-outset,
ktorá nastavuje posun obrázku pre ohraničenie