Właściwość border-image-repeat

Właściwość border-image-repeat ustawia sposób powtarzania wewnętrznej części obramowania w postaci obrazka. Aby uzyskać bardziej szczegółowe informacje zobacz właściwość border-image.

Składnia

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

Wartości

Liczba parametrów	Opis
`stretch`	Rozciąga rysunek obramowania do rozmiarów elementu. Ta wartość jest używana domyślnie.
`repeat`	Powtarza rysunek obramowania.
`round`	Powtarza rysunek i skaluje go tak, aby na boku elementu znalazła się całkowita liczba obrazków.

Wartość domyślna: stretch.

Liczba parametrów

Może przyjmować 1 lub 2 parametry. Jeśli podane są dwa parametry, to pierwszy z nich będzie dla górnej i dolnej granicy, a drugi parametr - dla lewej i prawej.

Przykład . Wartość 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;
}

Przykład . Wartość 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;
}

Przykład . Wartość round

Teraz w normalnym stanie ustawiona jest wartość repeat, a po najechaniu - round. Zwróć uwagę, że przed najechaniem w obramowanie mieści się niecałkowita liczba rombów, a po najechaniu - całkowita. Tak dział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;
}

Przykład . Dwa słowa

Wartość repeat dla szerokości i stretch dla wysokości:

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

Zobacz też

właściwość border-image,
która jest skrótem dla obramowania-obrazka
właściwość border-image-source,
która ustawia ścieżkę do obrazka dla obramowania
właściwość border-image-slice,
która dzieli obrazek dla obramowania
właściwość border-image-width,
która ustawia rozmiar obrazka dla obramowania
właściwość border-image-outset,
która ustawia przesunięcie obrazka dla obramowania