Свойство border-image-width

Свойство border-image-width рамканинг кўринадиган кисмининг кенгайини бошкаради, уни миқёслайди. Агар бу қиймат border-width кенгайидан катта бўлса, рамка расми мазмун остига кириб кетади.

Батафсил маълумот учун border-image свойствасига қаранг.

Синтаксис

селектор {
	border-image-width: CSS бирликлар | фоизлар | сон | auto;
}

Қийматлар

Қиймат	Тасниф
CSS бирликлар	Берилган CSS бирликлардаги қиймат.
Фоизлар	Рамка берилган блок ўлчамига нисбатан фоизлардаги қийматлар.
Сон	`border-width` га купайтириладиган сонли қиймат.
`auto`	Калит сўз. Агар берилган бўлса, қиймат мос `border-image-slice` га тенг бўлади. Агар мос келадиган ўлчам бўлмаса, `border-width` қиймати ишлатилади, бу ҳолда расм рамканинг бутун бурчагини тўлдириб, мазмун остига кириб кетади. Яхши тушуниш учун мисолларга қаранг.

Стандарт қиймат: 1.

Мисол . Сон

Элементга sichqoncha олиб борилганда border-image-width қийматини 2 га ўрнатамиз. Бу ҳолда рамка 26px*2 ўлчамга эга бўлади - border-width да берилган кенгайидан 2 баробар катта. Рамма бу ҳолда матн остига киради (фон туріда):

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

Мисол . border-image-repeat-ни round га ўзгартирамиз

Олдинги мисолда sichqoncha олиб борилганда рамкада ромбчаларнинг бутун сони бўлмайди. Буни border-image-repeat ний round қийматига ўрнаб тузатамиз:

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

Мисол . Фоизлар

Элементга sichqoncha олиб борилганда border-image-width қийматини 50% га ўрнатамиз. Бу ҳолда рамка блок ўлчамининг 50% қийматига тенг бўлади (яъни ўнг ва чап раммалар блокнинг ўзини тўлиқ қоплайди):

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

Мисол . Фоизлар

Элементга sichqoncha олиб борилганда border-image-width қийматини 30% га ўрнатамиз. Бу ҳолда рамка блок ўлчамининг 30% қийматига тенг бўлади:

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

Мисол . Пикселлар

Элементга sichqoncha олиб борилганда border-image-width ний 50px га ўрнатамиз:

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

Мисол . auto қиймати

Элементга sichqoncha олиб борилганда border-image-width ний auto га ўрнатамиз.

Олиб боришдан олдин border-image-width 1 қийматга эга (стандарт). Мисолда border-width 52px га, border-image-slice эса 26 қийматга белгиланган (auto таъсири фақат border-width border-image-slice га тенг бўлмагандагина кўринади). border-image-width 1 қийматга эга бўлгани учун, рамка расми border-width нинг тўлиқ кенгайини эгаллайди, яъни 52px га чўзилади. Олиб борилганда border-image-width қиймати auto га ўрнатилиб, расм кенгайи border-image-slice кийматига тенг бўлади, яъни 26px:

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

Шунингдек қаранг

border-image свойстваси,
рамка-расм учун қисқартма бўлган
border-image-source свойстваси,
рамка учун расм йўлини белгиловчи
border-image-slice свойстваси,
рамка учун расмни бўлиш
border-image-repeat свойстваси,
рамка учун расмни такрорлаш
border-image-outset свойстваси,
рамка учун расмни силжишни белгиловчи