Border-image-width xususiyati

border-image-width xususiyati chekkaning ko‘rinadigan qismining kengligini boshqaradi, uni masshtablaydi. Agar bu qiymat border-width kengligidan katta bo‘lsa, chekka rasmi kontent ostiga kirib ketadi.

Batafsil ma'lumot uchun border-image xususiyatiga qarang.

Sintaksis

selektor {
	border-image-width: CSS birliklar | foizlar | son | auto;
}

Qiymatlar

Qiymat	Ta'rif
CSS birliklar	Belgilangan CSS birliklardagi qiymat.
Foizlar	Chekka berilgan blok o‘lchamiga nisbatan foizlardagi qiymatlar.
Son	`border-width` ga ko‘paytiriladigan son qiymati.
`auto`	Kalit so‘z. Agar u belgilangan bo‘lsa, qiymat mos keladigan `border-image-slice` ga teng. Agar mos keladigan o‘lcham bo‘lmasa, `border-width` qiymati qo‘llaniladi, bunda rasm chekka burchagining butun qismini to‘ldiradi va kontent ostiga kiradi. Yaxshiroq tushunish uchun misollarga qarang.

Standart qiymat: 1.

Misol . Son

border-image-width qiymatini 2 ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz. Bunda chekka 26px*2 o‘lchamida bo‘ladi - border-width da belgilangan kengligidan 2 marta katta. Chekka bu holda matn ostiga kiradi (fon turida):

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

Misol . Border-image-repeat ni round ga o‘zgartiramiz

Oldingi misolda sichqoncha bilan ko‘rsatilganda chekka butun sonli rombachalar bo‘lmaydi. Buni border-image-repeat ni round qiymatiga o‘rnatib tuzatamiz:

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

Misol . Foizlar

border-image-width qiymatini 50% ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz. Bunda chekka blok o‘lchamining 50% i o‘lchamida bo‘ladi (ya'ni o‘ng va chap chekkalar butun blokni o‘ziga qamrab oladi):

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

Misol . Foizlar

border-image-width qiymatini 30% ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz. Bunda chekka blok o‘lchamining 30% i o‘lchamida bo‘ladi:

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

Misol . Piksellar

border-image-width qiymatini 50px ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz:

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

Misol . Auto qiymati

border-image-width qiymatini auto ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz.

Ko‘rsatishdan oldin border-image-width 1 qiymatiga ega (standart). Misolda maxsus border-width 52px ga o‘rnatilgan, border-image-slice esa 26 qiymatida (auto effekti faqat border-width border-image-slice ga teng bo‘lmaganda kuzatiladi). border-image-width 1 qiymatiga ega bo‘lgani uchun, chekka rasmi border-width ning butun kengligini egallaydi, ya'ni 52px ga cho‘ziladi. Ko‘rsatilganda border-image-width qiymati auto ga o‘rnatiladi va rasm kengligi border-image-slice qiymatiga, ya'ni 26px ga teng bo‘ladi:

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

Shuningdek qarang

border-image xususiyati,
chekka-rasm uchun qisqartma hisoblanadi
border-image-source xususiyati,
chekka uchun rasm manzilini belgilaydi
border-image-slice xususiyati,
chekka uchun rasm bo‘linishini belgilaydi
border-image-repeat xususiyati,
chekka uchun rasm takrorlanishini belgilaydi
border-image-outset xususiyati,
chekka uchun rasm siljishini belgilaydi