Egenskapen border-image-outset

Egenskapen border-image-outset lar deg forskyve rammen utenfor elementet. Som verdi angis et tall uten målenheter eller andre enheter for størrelser, unntatt prosent. Hvis det er angitt et tall uten enheter, er det en multiplikator som multipliseres med verdien av egenskapen border-width. Negative verdier støttes ikke.

For mer detaljert informasjon om bilder for rammer, se egenskapen border-image.

Syntaks

velger {
	border-image-outset: positivt tall;
}

Eksempel . Tall

La oss sette verdien border-image-outset til 3 når musepekeren holdes over elementet. Dermed vil rammen flyttes 26px*3 - 3 ganger lenger enn bredden, satt 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;
}

Eksempel . Piksler

La oss sette verdien border-image-outset til 30px når musepekeren holdes over elementet. Dermed vil rammen flyttes 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 også

egenskapen border-image,
som er en sammensetting for bilde-ramme
egenskapen border-image-source,
som angir banen til bildet for rammen
egenskapen border-image-slice,
som deler bildet for rammen
egenskapen border-image-repeat,
som gjentar bildet for rammen
egenskapen border-image-width,
som angir størrelsen på bildet for rammen