Egenskapen border-image-outset

Egenskapen border-image-outset gör det möjligt att flytta kanten utanför elementet. Som värde anges ett tal utan angivelse av måttenheter eller valfria enheter för storlekar, förutom procent. Om ett tal utan enheter anges, är det en multiplikator som multipliceras med värdet från egenskapen border-width. Negativa värden stöds inte.

För mer detaljerad information om bilder för kanter, se egenskapen border-image.

Syntax

selektor {
	border-image-outset: positivt tal;
}

Exempel . Tal

Sätt värdet på border-image-outset till 3 när musen hovrar över elementet. Då kommer kanten att flyttas 26px*3 - 3 gånger längre bort än dess bredd, angiven i border-width:

<div id="elem"></div>

#elem:hover {
	border-image-outset: 3;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 100px auto;
}

Exempel . Pixlar

Sätt värdet på border-image-outset till 30px när musen hovrar över elementet. Då kommer kanten att flyttas 30px:

<div id="elem"></div>

#elem:hover {
	border-image-outset: 30px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 50px auto;
}

Se även

egenskapen border-image,
som är en sammanfattning för kantbild
egenskapen border-image-source,
som anger sökvägen till bilden för kanten
egenskapen border-image-slice,
som delar upp bilden för kanten
egenskapen border-image-repeat,
som upprepning av bilden för kanten
egenskapen border-image-width,
som anger storleken på bilden för kanten