border-image-outset Özelliği

border-image-outset özelliği, kenarlığı öğenin sınırlarının dışına kaydırmanıza olanak tanır. Değer olarak, ölçü birimi belirtilmeden bir sayı veya yüzde hariç herhangi bir boyut birimi kullanılabilir. Ölçü birimi olmadan bir sayı belirtilirse, bu sayı, border-width özelliğinin değerleriyle çarpılan bir çarpan görevi görür. Negatif değerler desteklenmez.

Kenarlık görselleri hakkında daha ayrıntılı bilgi için border-image özelliğine bakın.

Sözdizimi

seçici {
	border-image-outset: pozitif sayı;
}

Örnek . Sayı

Fare öğenin üzerine geldiğinde border-image-outset değerini 3 olarak ayarlayalım. Bu durumda kenarlık, 26px*3 - border-width içinde ayarlanan genişliğinin 3 katı kadar uzağa kaydırılacaktır:

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

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

Örnek . Piksel

Fare öğenin üzerine geldiğinde border-image-outset değerini 30px olarak ayarlayalım. Bu durumda kenarlık 30px kaydırılacaktır:

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

#elem:hover {
	border-image-outset: 30px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 50px 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 belirten border-image-source özelliği
kenarlık görselinin dilimlenmesini sağlayan border-image-slice özelliği
kenarlık görselinin tekrarlanmasını sağlayan border-image-repeat özelliği
kenarlık görselinin boyutunu belirleyen border-image-width özelliği