A border-image-slice tulajdonság
A border-image-slice tulajdonság határozza meg
a böngésző számára, hogy a kép mely részei kerüljenek
a sarkokra, és melyek az oldalakra (és melyik rész
lesz a középső). A sarkokra 4
rész kerül, az oldalakra 4 rész kerül, és egy
rész (a középső) az elem hátterére kerül
(opcionálisan, a fill kulcsszó).
Részletesebb információkért lásd a
border-image tulajdonságot.
Szintaxis
1-edik 4-edik számig | 1-től 1-edik 4-edik százalékig;
}
<-css->
A számokkal és százalékokkal szóközzel elválasztva
állhat a fill kulcsszó.
Értékek
| Érték | Leírás |
|---|---|
| százalék | A százalékok a kép méretéhez viszonyítva számítódnak. A vízszintesek a szélesség, a függőlegesek pedig a magasság alapján. |
| számok | A számok pixeleket jelentenek (a raszteres képeknél) vagy koordinátákat (a vektorgrafikáknál). A mértékegység nincs megadva. |
fill |
Az alapértelmezett viselkedés szerint a kép középső része
eldobásra kerül. Ahhoz, hogy ezt a részt is felhasználjuk,
a fill kulcsszót kell használni a számok vagy százalékok mellett.
|
Paraméterek száma
Az eltolás 1, 2,
3 vagy 4 paramétert vehet fel. Kérjük,
vegye figyelembe, hogy az eltolás mértékegysége
nincs leírva (például csak 20,
és nem 20px). A vastagságot %-ban is megadhatja.
| Paraméterek száma | Leírás |
|---|---|
1 |
Vastagság minden oldalra egyszerre. |
2 |
1 2; - 1px felülre és alulra, 2px balra és jobbra. |
3 |
1 2 3; - 1px felülre, 2px balra és jobbra, 3px alulra. |
4 |
1 2 3 4; - 1px felülre, 2px jobbra, 3px alulra, 4px balra. |
Alapértelmezett érték: 100%(?).
Példa
<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élda
<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;
}
:
Lásd még
-
a
border-imagetulajdonság,
ami a képkeret rövidítése -
a
border-image-sourcetulajdonság,
ami megadja a kép elérési útját a kerethez -
a
border-image-repeattulajdonság,
ami a kép ismétlését határozza meg a kerethez -
a
border-image-widthtulajdonság,
ami a kép méretét határozza meg a kerethez -
a
border-image-outsettulajdonság,
ami a kép eltolását határozza meg a kerethez