border-image-slice Özelliği

border-image-slice özelliği, tarayıcıya görselin hangi parçalarının köşelere, hangilerinin kenarlara gideceğini (ve hangi parçanın orta kısım için kullanılacağını) belirtir. Köşelere 4 parça, kenarlara 4 parça gider ve bir parça (orta kısım) öğenin arka planı için kullanılır (isteğe bağlı, fill anahtar kelimesi).

Daha ayrıntılı bilgi için border-image özelliğine bakın.

Sözdizimi

<+css+> seçici { border-image-slice: 1'den 4'e kadar sayı | 1'den 4'e kadar yüzde; } <-css->

Sayılar ve yüzdelerle birlikte, boşlukla ayrılmış şekilde fill anahtar kelimesi kullanılabilir.

Değerler

Değer	Açıklama
yüzde	Yüzdeler, görselin boyutuna göre hesaplanır. Yatay olanlar genişliğe, dikey olanlar ise yüksekliğe göredir.
sayı	Sayılar, pikselleri (bitmap görseller için) veya koordinatları (vektörel görseller için) ifade eder. Birim belirtilmez.
`fill`	Varsayılan davranış, görselin orta kısmının atılmasıdır. Orta kısmı kullanmak için, sayılara veya yüzdelerle birlikte `fill` anahtar kelimesini kullanmak gerekir.

Parametre Sayısı

Ofset, 1, 2, 3 veya 4 parametre alabilir. Ofset için birimlerin yazılmadığına dikkat edin (örneğin, sadece 20, 20px değil). Ayrıca kalınlık % olarak da ayarlanabilir.

Parametre Sayısı	Açıklama
`1`	Tüm kenarlar için aynı anda kalınlık.
`2`	1 2; - Üst ve alt için `1px`, sol ve sağ için `2px`.
`3`	`1 2 3`; - Üst için `1px`, sol ve sağ için `2px`, alt için `3px`.
`4`	`1 2 3 4`; - Üst için `1px`, sağ için `2px`, alt için `3px`, sol için `4px`.

Varsayılan değer: 100%(?).

Örnek

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

Örnek

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

Ayrıca Bakınız

kenarlık-görseli için kısayol olan border-image özelliği
kenarlık için görsel yolunu belirleyen border-image-source özelliği
kenarlık için görsel tekrarını belirleyen border-image-repeat özelliği
kenarlık için görsel boyutunu belirleyen border-image-width özelliği
kenarlık için görsel ofsetini belirleyen border-image-outset özelliği