Border-image-slice xususiyati

border-image-slice xususiyati brauzerga rasmning qaysi qismlari burchaklarga, qaysi qismlari tomonlarga qo'yilishini (va qaysi qismi markaziy bo'lishini) ko'rsatadi. Burchaklarga 4 qism, tomonlarga 4 qism va bitta qism (markaziy) element foniga qo'yiladi (ixtiyoriy, fill kalit so'zi).

Batafsil ma'lumot uchun border-image xususiyatiga qarang.

Sintaksis

<+css+> selektor { border-image-slice: 1-dan 4-gacha bo'lgan sonlar | 1-dan 4-gacha bo'lgan foizlar; } <-css->

Sonlar va foizlar bilan birga probel orqali fill kalit so'zi qo'shilishi mumkin.

Qiymatlar

Qiymat	Tavsif
foizlar	Foizlar rasm o'lchamiga nisbatan hisoblanadi. Gorizontal qiymatlar eniga, vertikal qiymatlar bo'yiga nisbatan.
sonlar	Sonlar piksellarni (rasterli rasm uchun) yoki koordinatalarni (vektorli rasm uchun) ifodalaydi. O'lchov birliklari ko'rsatilmaydi.
`fill`	Standart xatti-harakat rasmning markaziy qismi tashlab yuborilishini nazarda tutadi. Uni ishlatish uchun, sonlar yoki foizlarga qo'shimcha ravishda `fill` kalit so'zidan foydalanish kerak.

Parametrlar soni

Siljish 1, 2, 3 yoki 4 parametrni qabul qilishi mumkin. E'tibor bering, siljish uchun o'lchov birliklari yozilmaydi (masalan, oddiy 20, 20px emas). Shuningdek, qalinlikni % da berish mumkin.

Parametrlar soni	Tavsif
`1`	Barcha tomonlar uchun bir vaqtning o'zida qalinlik.
`2`	1 2; - `1px` yuqori va pastki uchun, `2px` chap va o'ng uchun.
`3`	`1 2 3`; - `1px` yuqori uchun, `2px` chap va o'ng uchun, `3px` pastki uchun.
`4`	`1 2 3 4`; - `1px` yuqori uchun, `2px` o'ng uchun, `3px` pastki uchun, `4px` chap uchun.

Standart qiymat: 100%(?).

Misol

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

Misol

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

Shuningdek qarang

border-image xususiyati,
bu chegaraga qo'yiladigan rasm uchun qisqartma
border-image-source xususiyati,
bu chegaraga qo'yiladigan rasm manbasini ko'rsatadi
border-image-repeat xususiyati,
bu chegaraga qo'yiladigan rasmning takrorlanishi
border-image-width xususiyati,
bu chegaraga qo'yiladigan rasm o'lchamini ko'rsatadi
border-image-outset xususiyati,
bu chegaraga qo'yiladigan rasmning siljishini ko'rsatadi