Savybė border-image-outset

Savybė border-image-outset leidžia pastumti rėmelį už elemento ribų. Kaip reikšmė nurodomas skaičius be matavimo vienetų arba bet kokie dydžių vienetai, išskyrus procentus. Jei nurodytas skaičius be vienetų, tai jis yra daugiklis, iš kurio dauginamos savybės border-width reikšmės. Neigiamos reikšmės nepalaikomos.

Norėdami gauti išsamesnės informacijos apie paveikslėlius kraštui, žiūrėkite savybę border-image.

Sintaksė

selektorius {
	border-image-outset: teigiamas skaičius;
}

Pavyzdys . Skaičius

Nustatykime border-image-outset reikšmę į 3 užvedus pelės žymeklį ant elemento. Tuomet kraštas pasislinks 26px*3 - 3 kartus toliau, nei jos plotis, nustatytas border-width savybėje:

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

Pavyzdys . Pikseliai

Nustatykime border-image-outset reikšmę į 30px užvedus pelės žymeklį ant elemento. Tuomet kraštas pasislinks 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;
}

Taip pat žiūrėkite

savybė border-image,
kuri yra trumpinys krašto paveikslėliui
savybė border-image-source,
kuri nurodo kelią į paveikslėlį kraštui
savybė border-image-slice,
kuri paveikslėlio skirstymas kraštui
savybė border-image-repeat,
kuri paveikslėlio kartojimas kraštui
savybė border-image-width,
kuri nustato paveikslėlio dydį kraštui