Savybė border-image-slice

Savybė border-image-slice nurodo naršyklei, kurios paveikslėlio dalys bus naudojamos kampams, o kurios - šonams (ir kuri dalis bus centrinė). Kampams skiriamos 4 dalis, šonams skiriamos 4 dalys ir viena dalys (centrinė) skiriama elemento fonui (pasirinktinai, raktažodis fill).

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

Sintaksė

<+css+> selektorius { border-image-slice: nuo 1-o iki 4-ų skaičių | nuo 1-o iki 4-ų procentų; } <-css->

Su skaičiais ir procentais per tarpą gali būti raktažodis fill.

Reikšmės

Reikšmė	Aprašas
procentai	Procentai skaičiuojami pagal paveikslėlio dydį. Horizontalūs - pagal plotį, vertikalūs - pagal aukštį.
skaičiai	Skaičiai - tai pikseliai (rastriniam paveikslėliui) arba koordinatės (vektoriniam). Matavimo vienetai nenurodomi.
`fill`	Numatytasis elgesys numato, kad centrinė paveikslėlio dalis bus atmesta. Norint ją panaudoti, reikia naudoti raktažodį `fill` papildomai prie skaičių ar procentų.

Parametrų kiekis

Poslinkis gali būti 1, 2, 3 arba 4 parametrai. Atkreipkite dėmesį, kad poslinkio matavimo vienetai nerašomi (pavyzdžiui, tiesiog 20, o ne 20px). Taip pat galima nustatyti storį %.

Parametrų skaičius	Aprašas
`1`	Storis visoms pusėms vienu metu.
`2`	1 2; - `1px` viršui ir apačiai, `2px` kairiai ir dešinei.
`3`	`1 2 3`; - `1px` viršui, `2px` kairiai ir dešinei, `3px` apačiai.
`4`	`1 2 3 4`; - `1px` viršui, `2px` dešinei, `3px` apačiai, `4px` kairiai.

Numatytoji reikšmė: 100%(?).

Pavyzdys

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

#elem {
	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;
}

Pavyzdys

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

Taip pat žiūrėkite

savybė border-image,
kuri yra santrumpa krašto paveikslėliui
savybė border-image-source,
kuri nurodo kelią į paveikslėlį kraštui
savybė border-image-repeat,
kuri nurodo krašto paveikslėlio kartojimą
savybė border-image-width,
kuri nurodo krašto paveikslėlio dydį
savybė border-image-outset,
kuri nurodo krašto paveikslėlio poslinkį