Vlastnosť border-image-slice

Vlastnosť border-image-slice určuje prehliadaču, ktoré časti obrázka pôjdu na rohy a ktoré na strany (a ktorá časť bude centrálnou). Na rohy idú 4 časti, na strany idú 4 časti a jedna časť (centrálna) ide na pozadie elementu (voliteľne, kľúčové slovo fill).

Pre podrobnejšie informácie pozri vlastnosť border-image.

Syntax

<+css+> selektor { border-image-slice: od 1-ho do 4-ch čísel | od 1-ho do 4-ch percent; } <-css->

S číslami a percentami cez medzeru môže stáť kľúčové slovo fill.

Hodnoty

Hodnota	Popis
percentá	Percentá sa počítajú relatívne k veľkosti obrázka. Horizontálne relatívne k šírke, vertikálne — relatívne k výške.
čísla	Čísla sú pixely (pre rastrový obrázok) alebo súradnice (pre vektorový). Jednotky merania neuvádzame.
`fill`	Predvolené správanie predpokladá, že centrálna časť obrázka bude zahodená. Aby sme ju použili, je potrebné použiť kľúčové slovo `fill` navyše k číslam alebo percentám.

Počet parametrov

Odsadenie môže prijať 1, 2, 3 alebo 4 parametre. Dávajte pozor na to, že jednotky merania pre odsadenie sa nepíšu (napríklad, len 20, a nie 20px). Taktiež je možné nastaviť hrúbku v %.

Počet parametrov	Popis
`1`	Hrúbka pre všetky strany súčasne.
`2`	1 2; - `1px` pre vrch a spodok, `2px` pre ľavú a pravú.
`3`	`1 2 3`; - `1px` pre vrch, `2px` pre ľavú a pravú, `3px` pre spodok.
`4`	`1 2 3 4`; - `1px` pre vrch, `2px` pre pravú, `3px` pre spodok, `4px` pre ľavú.

Predvolená hodnota: 100%(?).

Príklad

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

Príklad

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

Pozri tiež

vlastnosť border-image,
ktorá je skratkou pre rám-obrázok
vlastnosť border-image-source,
ktorá nastavuje cestu k obrázku pre rám
vlastnosť border-image-repeat,
ktorá opakovanie obrázka pre rám
vlastnosť border-image-width,
ktorá nastavuje veľkosť obrázka pre rám
vlastnosť border-image-outset,
ktorá nastavuje posun obrázka pre rám