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

<+css+> selektor { border-image-slice: 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