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