Eigenschap border-image-repeat

De eigenschap border-image-repeat specificeert hoe het binnenste deel van de rand als afbeelding wordt herhaald. Voor meer gedetailleerde informatie zie de eigenschap border-image.

Syntaxis

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

Waarden

Waarde	Beschrijving
`stretch`	Rekt de randafbeelding uit tot de afmetingen van het element. Dit is de standaardwaarde.
`repeat`	Herhaalt de randafbeelding.
`round`	Herhaalt de afbeelding en schaalt deze zo dat er een geheel aantal afbeeldingen op de zijde van het element past.

Standaardwaarde: stretch.

Aantal parameters

Accepteert 1 of 2 parameters. Als er twee parameters zijn opgegeven, dan is de eerste voor de boven- en onderrand, en de tweede parameter - voor de linker- en rechterrand.

Voorbeeld . Waarde 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;
}

Voorbeeld . Waarde 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;
}

Voorbeeld . Waarde round

Momenteel is in de normale staat de waarde repeat ingesteld, en bij hover - round. Merk op dat vóór het hoveren er geen geheel aantal ruiten in de rand past, en na het hoveren - wel. Zo werkt 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;
}

Voorbeeld . Twee woorden

Waarde repeat voor de breedte en stretch voor de hoogte:

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

Zie ook

de eigenschap border-image,
dat een korte notatie is voor de rand-afbeelding
de eigenschap border-image-source,
dat het pad naar de afbeelding voor de rand specificeert
de eigenschap border-image-slice,
dat het snijden van de afbeelding voor de rand specificeert
de eigenschap border-image-width,
dat de grootte van de afbeelding voor de rand specificeert
de eigenschap border-image-outset,
dat de verschuiving van de afbeelding voor de rand specificeert