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.

Мисал . Сан

Элементке чычканды апарганда 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 кылалы

Өткөн мисалда чычканды апарганда чекте ромб түрүндөгү элементтердин бүтүн саны болбойт. Муну 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;
}

Мисал . Пайыздар

Элементке чычканды апарганда 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;
}

Мисал . Пайыздар

Элементке чычканды апарганда 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;
}

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

Элементке чычканды апарганда 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 мааниси

Элементке чычканды апарганда 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 касиети,
чек үчүн сүрөттү жылдырууну белгилейт