Egenskapen border-image-repeat

Egenskapen border-image-repeat anger hur den inre delen av en ram som bild sk upprepas. För mer detaljerad information, se egenskapen border-image.

Syntax

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

Värden

Värde	Beskrivning
`stretch`	Sträcker rambilden till elementets storlek. Detta värde används som standard.
`repeat`	Upprepar rambilden.
`round`	Upprepar bilden och skalar den så att ett helt antal bilder får plats på elementets sida.

Standardvärde: stretch.

Antal parametrar

Kan ta 1 eller 2 parametrar. Om två parametrar anges, kommer den första att gälla för övre och nedre ramen, och den andra parametern för vänstra och högra ramen.

Exempel . Värdet 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;
}

Exempel . Värdet 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;
}

Exempel . Värdet round

Just nu är värdet repeat i normalt tillstånd, och vid hovring - round. Lägg märke till att före hovring passar ett icke-helt antal romber i ramen, men efter hovring - ett helt antal. Så fungerar 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;
}

Exempel . Två värden

Värdet repeat för bredd och stretch för höjd:

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

Se även

egenskapen border-image,
som är en genväg för ram som bild
egenskapen border-image-source,
som anger sökvägen till bilden för ramen
egenskapen border-image-slice,
som delar upp bilden för ramen
egenskapen border-image-width,
som anger storleken på bilden för ramen
egenskapen border-image-outset,
som anger förskjutningen av bilden för ramen