Eienskap border-image-outset

Die eienskap border-image-outset laat toe om die grens buite die element te skuif. As waarde word 'n nommer sonder eenhede aangedui of enige eenhede vir groottes, behalwe persentasies. Indien 'n nommer sonder eenhede aangedui word, is dit 'n faktor waarmee die waarde van die eienskap border-width vermenigvuldig word. Negatiewe waardes word nie ondersteun nie.

Vir meer gedetailleerde inligting oor beelde vir grense, kyk na die eienskap border-image.

Sintaksis

selektor {
	border-image-outset: positiewe nommer;
}

Voorbeeld . Nommer

Stel die waarde van border-image-outset in op 3 wanneer die muis oor die element beweeg. Die grens sal dan verskuif na 26px*3 - met 3 keer verder as sy breedte, gespesifiseer in 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;
}

Voorbeeld . Pixels

Stel die waarde van border-image-outset in op 30px wanneer die muis oor die element beweeg. Die grens sal dan verskuif na 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;
}

Sien ook

die eienskap border-image,
wat 'n afkorting is vir 'n grensbeeld
die eienskap border-image-source,
wat die pad na die beeld vir die grens spesifiseer
die eienskap border-image-slice,
wat die sny van die beeld vir die grens spesifiseer
die eienskap border-image-repeat,
wat die herhaling van die beeld vir die grens spesifiseer
die eienskap border-image-width,
wat die grootte van die beeld vir die grens spesifiseer