⌘K

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

html<div id="elem"></div>
css#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

html<div id="elem"></div>
css#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é

BackVlastnost border-image-sourceNextVlastnost border-image-repeat