border-image-width Özelliği

border-image-width özelliği, kenarlığın görünür kısmının genişliğini kontrol eder, onu ölçeklendirir. Eğer bu değer, border-width genişliğinden büyükse, kenarlık resmi içeriğin altına girer.

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

Sözdizimi

seçici {
	border-image-width: CSS birimleri | yüzde | sayı | auto;
}

Değerler

Değer	Açıklama
CSS birimleri	Belirtilen CSS birimlerinde değer.
Yüzde	Kenarlık atanmış bloğun boyutuna göre yüzde değerleri.
Sayı	`border-width` değeri ile çarpılan sayısal değer.
`auto`	Anahtar kelime. Belirtilirse, değer ilgili `border-image-slice` değerine eşittir. Uygun bir boyut yoksa, `border-width` değeri kullanılır, bu durumda resim içeriğin altına girerek kenarlığın tüm köşesini doldurur. Daha iyi anlamak için örneklere bakın.

Varsayılan değer: 1.

Örnek . Sayı

Fare öğenin üzerine geldiğinde border-image-width değerini 2 olarak ayarlayalım. Bu durumda kenarlık 26px*2 boyutunda olacak - border-width içinde belirtilen genişliğinin 2 katı. Kenarlık bu durumda metnin altına girecektir (bir çeşit arkaplan gibi):

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Örnek . border-image-repeat değerini round olarak değiştirelim

Önceki örnekte, fare üzerine geldiğinde kenarlıkta tam sayıda elmas olmayacak. Bunu düzeltmek için border-image-repeat değerini round olarak ayarlayalım:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: round;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Örnek . Yüzde

Fare öğenin üzerine geldiğinde border-image-width değerini 50% olarak ayarlayalım. Bu durumda kenarlık, bloğun boyutunun 50%'si kadar olacak (yani sağ ve sol kenarlıkların ikisi bloğun tamamını kaplayacak):

<div id="elem"></div>

#elem:hover {
	border-image-width: 50%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Örnek . Yüzde

Fare öğenin üzerine geldiğinde border-image-width değerini 30% olarak ayarlayalım. Bu durumda kenarlık, bloğun boyutunun 30%'si kadar olacak:

<div id="elem"></div>

#elem:hover {
	border-image-width: 30%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Örnek . Piksel

Fare öğenin üzerine geldiğinde border-image-width değerini 50px olarak ayarlayalım:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Örnek . Auto Değeri

Fare öğenin üzerine geldiğinde border-image-width değerini auto olarak ayarlayalım.

Fare gelmeden önce border-image-width 1 değerine sahiptir (varsayılan olarak). Örnekte özellikle border-width 52px olarak, border-image-slice ise 26 değerinde ayarlanmıştır (auto etkisi sadece border-width, border-image-slice değerine eşit değilse gözlemlenir). border-image-width değeri 1 olduğu için, kenarlık resmi border-width değerinin tamamını kaplayacak, yani 52px kadar esneyecektir. Fare üzerine geldiğinde border-image-width değeri auto olarak ayarlanacak ve resim genişliği border-image-slice değerine, yani 26px'ye eşit olacaktır:

<div id="elem"></div>

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ayrıca Bakınız

border-image özelliği,
kenarlık resmi için kısaltmadır
border-image-source özelliği,
kenarlık için resim yolunu belirtir
border-image-slice özelliği,
kenarlık için resmin bölümlerini ayırır
border-image-repeat özelliği,
kenarlık için resmin tekrarını belirtir
border-image-outset özelliği,
kenarlık için resmin dışa kaymasını belirtir