Vlastnost border-image-repeat

Vlastnost border-image-repeat nastavuje způsob opakování vnitřní části ohraničení ve formě obrázku. Pro podrobnější informace vizte vlastnost border-image.

Syntaxe

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

Hodnoty

Počet parametrů	Popis
`stretch`	Roztáhne vzor ohraničení do velikosti prvku. Tato hodnota je použita ve výchozím stavu.
`repeat`	Opakuje vzor ohraničení.
`round`	Opakuje vzor a škáluje jej tak, aby na straně prvku bylo celé číslo obrázků.

Výchozí hodnota: stretch.

Počet parametrů

Může přijímat 1 nebo 2 parametry. Pokud jsou zadány dva parametry, pak první z nich bude pro horní a dolní ohraničení, a druhý parametr - pro levé a pravé.

Pří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;
}

Pří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;
}

Příklad . Hodnota round

Nyní je v normálním stavu nastavena hodnota repeat, a po najetí - round. Všimněte si, že před najetím se do ohraničení vejde necelé množství kosočtverců, a po najetí - 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;
}

Příklad . Dvě slova

Hodnota repeat pro šířku a stretch pro 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;
}

Vizte také

vlastnost border-image,
která je zkratkou pro ohraničení-obrázek
vlastnost border-image-source,
která nastavuje cestu k obrázku pro ohraničení
vlastnost border-image-slice,
která rozdělení obrázku pro ohraničení
vlastnost border-image-width,
která nastavuje velikost obrázku pro ohraničení
vlastnost border-image-outset,
která nastavuje posun obrázku pro ohraničení