⌘K

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

html<div id="elem"></div>
css#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

html<div id="elem"></div>
css#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

BackSvojstvo border-image-sourceNextSvojstvo border-image-repeat