Omadus border-image-slice
Omadus border-image-slice määrab
brauserile, millised pildi osad lähevad
nurkadeks ja millised külgedeks (ja milline osa
jääb keskmiseks). Nurki läheb 4
osa, külgi läheb 4 osa ja üks
osa (keskmine) läheb elemendi taustaks
(valikuline, võtmesõna fill).
Täpsema teabe saamiseks vaadake omadust
border-image.
Süntaks
1-st kuni 4-ni arvud | 1-st kuni 4-ni protsendid;
}
<-css->
Arvude ja protsentidega tühikuga eraldatuna võib
olla võtmesõna fill.
Väärtused
| Väärtus | Kirjeldus |
|---|---|
| protsendid | Protsendid arvutatakse pildi suuruse suhtes. Horisontaalsed laiuse, vertikaalsed kõrguse suhtes. |
| arvud | Arvud on pikslid (rastripildi puhul) või koordinaadid (vektorpildi puhul). Mõõtühikuid ei märgita. |
fill |
Vaikimisi käitumine eeldab, et pildi keskmine osa
jäetakse kõrvale. Selle kasutamiseks
on vaja lisada arvudele või protsentidele
võtmesõna fill.
|
Parameetrite arv
Nihke väärtus võib olla 1, 2,
3 või 4 parameetrit. Pange
tähele, et nihke mõõtühikuid
ei kirjutata (näiteks lihtsalt 20,
mitte 20px). Samuti saab paksust määrata %-des.
| Parameetrite arv | Kirjeldus |
|---|---|
1 |
Paksus kõikidele külgedele korraga. |
2 |
1 2; - 1px ülemisele ja alumisele, 2px vasakule ja paremale. |
3 |
1 2 3; - 1px ülemisele, 2px vasakule ja paremale, 3px alumisele. |
4 |
1 2 3 4; - 1px ülemisele, 2px paremale, 3px alumisele, 4px vasakule. |
Vaikeväärtus: 100%(?).
Näide
<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;
}
:
Näide
<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;
}
:
Vaata ka
-
omadus
border-image,
mis on piiri pildi lühend -
omadus
border-image-source,
mis määrab piiri pildi tee -
omadus
border-image-repeat,
mis kordab piiri pilti -
omadus
border-image-width,
mis määrab piiri pildi suuruse -
omadus
border-image-outset,
mis määrab piiri pildi nihke