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 қасиеті,
шекара үшін кескінді ығысуын көрсетеді