Proprietatea border-image-slice

Proprietatea border-image-slice indică browserului, ce părți ale imaginii vor fi utilizate pentru colțuri, și care pentru laturi (și care parte va fi cea centrală). Pentru colțuri sunt 4 părți, pentru laturi sunt 4 părți și una parte (centrală) este utilizată pentru fundalul elementului (opțional, cuvântul cheie fill).

Pentru informații mai detaliate consultați proprietatea border-image.

Sintaxă

<+css+> selector { border-image-slice: de la 1-lea până la 4-lea număr | de la 1-lea până la 4-lea procent; } <-css->

Împreună cu numerele și procentele, separate prin spațiu, poate fi folosit cuvântul cheie fill.

Valori

Valoare	Descriere
procente	Procentele sunt calculate relativ la dimensiunea imaginii. Orizontale relativ la lățime, verticale — relativ la înălțime.
numere	Numerele reprezintă pixeli (pentru imagini raster) sau coordonate (pentru imagini vectoriale). Unitățile de măsură nu sunt indicate.
`fill`	Comportamentul implicit presupune că partea centrală a imaginii va fi eliminată. Pentru a o utiliza, este necesar să folosiți cuvântul cheie `fill` în plus față de numere sau procente.

Numărul de parametri

Decalajul poate primi 1, 2, 3 sau 4 parametri. Acordați atenție faptului că unitățile de măsură pentru decalaj nu se scriu (de exemplu, doar 20, și nu 20px). De asemenea, puteți specifica grosimea în %.

Număr de parametri	Descriere
`1`	Grosime pentru toate laturile simultan.
`2`	1 2; - `1px` pentru partea de sus și de jos, `2px` pentru stânga și dreapta.
`3`	`1 2 3`; - `1px` pentru partea de sus, `2px` pentru stânga și dreapta, `3px` pentru partea de jos.
`4`	`1 2 3 4`; - `1px` pentru partea de sus, `2px` pentru dreapta, `3px` pentru partea de jos, `4px` pentru stânga.

Valoare implicită: 100%(?).

Exemplu

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

Exemplu

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

Vedeți și

proprietatea border-image,
care este o prescurtare pentru bordură-imagine
proprietatea border-image-source,
care specifică calea către imagine pentru bordură
proprietatea border-image-repeat,
care repetă imaginea pentru bordură
proprietatea border-image-width,
care specifică dimensiunea imaginii pentru bordură
proprietatea border-image-outset,
care specifică decalajul imaginii pentru bordură