Vlastnost border-image-slice

Vlastnost border-image-slice určuje prohlížeči, které části obrázku půjdou na rohy a které na strany (a která část bude středová). Na rohy jdou 4 části, na strany jdou 4 části a jedna část (středová) jde na pozadí elementu (volitelně, klíčové slovo fill).

Pro podrobnější informace se podívejte na vlastnost border-image.

Syntaxe

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

S čísly a procenty přes mezeru může stát klíčové slovo fill.

Hodnoty

Hodnota	Popis
procenta	Procenta se vypočítávají vzhledem k velikosti obrázku. Horizontální vzhledem k šířce, vertikální — vzhledem k výšce.
čísla	Čísla jsou pixely (pro rastrový obrázek) nebo souřadnice (pro vektorový). Jednotky měření se neuvádějí.
`fill`	Výchozí chování předpokládá, že středová část obrázku bude zahozena. Aby byla použita, je nutné použít klíčové slovo `fill` navíc k číslům nebo procentům.

Počet parametrů

Odsazení může přijímat 1, 2, 3 nebo 4 parametry. Všimněte si, že jednotky měření pro odsazení se nepíšou (například pouze 20, a ne 20px). Také lze nastavit tloušťku v %.

Počet parametrů	Popis
`1`	Tloušťka pro všechny strany současně.
`2`	1 2; - `1px` pro vrch a spodek, `2px` pro levou a pravou.
`3`	`1 2 3`; - `1px` pro vrch, `2px` pro levou a pravou, `3px` pro spodek.
`4`	`1 2 3 4`; - `1px` pro vrch, `2px` pro pravou, `3px` pro spodek, `4px` pro levou.

Výchozí hodnota: 100%(?).

Pří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;
}

Pří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;
}

Viz také

vlastnost border-image,
které je zkratkou pro obrázkový okraj
vlastnost border-image-source,
které nastavuje cestu k obrázku pro okraj
vlastnost border-image-repeat,
které opakování obrázku pro okraj
vlastnost border-image-width,
které nastavuje velikost obrázku pro okraj
vlastnost border-image-outset,
které nastavuje posun obrázku pro okraj