Border-image-outset xususiyati

border-image-outset xususiyati chekkani element chegarasidan tashqariga siljitish imkonini beradi. Qiymat sifatida o'lchov birliklarisiz ko'rsatilgan raqam yoki foizlardan tashqari har qanday o'lchamlar uchun birliklar ko'rsatilishi mumkin. Agar birliksiz raqam ko'rsatilgan bo'lsa, u border-width xususiyatining qiymatlariga ko'paytiriladigan ko'paytuvchi hisoblanadi. Salbiy qiymatlar qo'llab-quvvatlanmaydi.

Chekka tasvirlari haqida batafsil ma'lumot uchun border-image xususiyatiga qarang.

Sintaksis

selector {
	border-image-outset: musbat raqam;
}

Misol . Raqam

border-image-outset qiymatini 3 ga sozlaymiz, elementga sichqoncha olib borilganda. Bunda chekka 26px*3 ga siljiydi - 3 marta uzoqroqqa, uning border-width da belgilangan kengligiga nisbatan:

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

Misol . Piksel

border-image-outset qiymatini 30px ga sozlaymiz, elementga sichqoncha olib borilganda. Bunda chekka 30px ga siljiydi:

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

Shuningdek qarang

border-image xususiyati,
bu chekka-tasvir uchun qisqartma hisoblanadi
border-image-source xususiyati,
bu chekka uchun tasvir manzilini belgilaydi
border-image-slice xususiyati,
bu chekka tasvirini bo'lish usulini belgilaydi
border-image-repeat xususiyati,
bu chekka tasvirining takrorlanish usulini belgilaydi
border-image-width xususiyati,
bu chekka tasvirining o'lchamini belgilaydi