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