Svojstvo border-image-slice

Svojstvo border-image-slice navodi pregledaču koji delovi slike će ići na uglove, a koji na strane (i koji deo će biti centralni). Na uglove idu 4 dela, na strane idu 4 dela i jedan deo (centralni) ide na pozadinu elementa (opciono, ključna reč fill).

Za detaljnije informacije pogledajte svojstvo border-image.

Sintaksa

<+css+> selektor { border-image-slice: od 1-og do 4-ih brojeva | od 1-og do 4-ih procenata; } <-css->

Sa brojevima i procentima kroz razmak može stajati ključna reč fill.

Vrednosti

Vrednost	Opis
procenti	Procenti se izračunavaju u odnosu na veličinu slike. Horizontalni u odnosu na širinu, vertikalni — u odnosu na visinu.
brojevi	Brojevi su pikseli (za rastersku sliku) ili koordinate (za vektorsku). Jedinice mere se ne navode.
`fill`	Podrazumevano ponašanje pretpostavlja da će centralni deo slike biti odbačen. Da biste ga iskoristili, neophodno je koristiti ključnu reč `fill` kao dopunu brojevima ili procentima.

Broj parametara

Pomeranje može da prihvati 1, 2, 3 ili 4 parametra. Obratite pažnju na to da se jedinice mere za pomeranje ne pišu (na primer, samo 20, a ne 20px). Takođe možete zadati debljinu u %.

Broj parametara	Opis
`1`	Debljina za sve strane istovremeno.
`2`	1 2; - `1px` za vrh i dno, `2px` za levu i desnu.
`3`	`1 2 3`; - `1px` za vrh, `2px` za levu i desnu, `3px` za dno.
`4`	`1 2 3 4`; - `1px` za vrh, `2px` za desnu, `3px` za dno, `4px` za levu.

Podrazumevana vrednost: 100%(?).

Primer

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

Primer

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

Pogledajte takođe

svojstvo border-image,
koje je skraćenica za granicu-sliku
svojstvo border-image-source,
koje zadaje putanju do slike za granicu
svojstvo border-image-repeat,
koje ponavlja sliku za granicu
svojstvo border-image-width,
koje zadaje veličinu slike za granicu
svojstvo border-image-outset,
koje zadaje pomeranje slike za granicu