Border-image касиети

border-image касиети чек арага сүрөттү коёт, ал төмөнкү касиеттердин кыскартылган касиети болуп саналат: border-image-source, border-image-slice, border-image-repeat, border-image-width жана border-image-outset. Бул кыскартылган касиет CSSте кыскартыла турган касиеттерден мурда пайда болгондуктан, аны өтө көп эски браузерлер колдойт.

Синтаксис

тандоочу {
	border-image: url(сүрөттүн жолу) кесилиш/калыңдык/жылдыруу кайталоо;
}

Сүрөттөмө

Чек арага колдонууну каалаган сүрөт атайын түрдө жасалышы керек: 4 бурчтар үчүн кичинекей сүрөттөр жана 4 капталдар үчүн сүрөттөр. Мындай сүрөттүн мисалы:

Бул учурда борбордук бөлүк бош калтырылган (анткени биз анын элементтин фонуна түшүшүн каалабайбыз). Толтурулган борбордук бөлүгү бар сүрөттүн мисалы:

slice мааниси браузерге кайсы сүрөт бөлүктөрү бурчтарга, кайсылары капталдарга бараарын (жана кайсы бөлүгү борбордук болот) көрсөтөт. Бурчтарга 4 бөлүктөр, капталдарга 4 бөлүктөр жана бир бөлүгү (борбордук) элементтин фонуна барат (милдеттүү эмес, ачкыч сөз fill).

Сүрөт төмөнкүдөй тартипте "кесилип" бөлүктөргө бөлүнөт: slice мааниси үчүн бирден төрткө чейин маанилер көрсөтүлөт. Келгиле мисал менен карап көрөлү. Төмөнкү маанилер көрсөтүлсүн: 10 20 30 40 (пикселдер px көрсөтүлбөйт, бул сүрөт растордук же вектордук болушу мүмкөндүгү менен байланыштуу). Маанилер төмөнкүнү билдирет: 10 жогорудан кес, 20 оңдон кес, 30 төмөнөн кес, 40 солдон кес. Сүрөттүн кайсы бөлүгү сол жогорку бурчка түшөт? Бул мындай бөлүкчө болот: 10 жогорудан, 40 солдон. Оң жогорку бурчка 10 жогорудан, 20 оңдон түшөт. Жана ушундай.

Көбүнчө сүрөт симметриялуу болот (жогорудагы ромбиктер сыяктуу) жана бизге бурчтар үчүн бирдей бөлүктөрдү кесүү керек. Мындай учурда бир гана маани көрсөтүлөт, ал бардык тараптан бирдей жылдырууларды берет. Кызгылт сары ромбиктерди кесүү үчүн, биз sliceты 26 деп көрсөтөбүз (анткени кызгылт сары ромбиктин өлчөмү 26px 26px). Сары ромбиктер чек ара сызыктарына түшөт жана алар менен төмөнкүдөй болот: алар же бүткүл блокко созулат же чек ара боюнча кайталанышат (repeat маанисине жараша):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

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

border-image касиети элементтин чек арасынын калыңдыгын көрсөтүүгө уруксат бербейт. Браузер сүрөттү бар калыңдыктагы чек ара боюнча жөн гана созот. Ошондуктан аны border касиети аркылуу берүү керек.

Эски браузерлердин колдонуучулары (же сүрөттөрү өчүрүлгөн) borderте берилген стандарттуу рамканы көрүшөт, ошондуктан ага ылайыктуу стилди жана түстү берүү маанилүү.

Маанилери

Маани	Сүрөттөмө
url(Сүрөткө жол)	Сүрөткө жол. Кененирээк маалымат үчүн караңыз `border-image-source`.
кесилиш	Браузерге кайсы сүрөт бөлүктөрү бурчтарга бараарын, кайсылары капталдарга бараарын (жана кайсы бөлүгү борбордук болот) көрсөтөт. Мүмкүн болгон маанилер: `1`-ден `4`-кө чейин сандар \| `1`-ден `4`-кө чейин пайыздар. Боштук аркылуу сандарга же пайыздарга кошумчалап `fill` ачкыч сөзү берилиши мүмкүн. Кененирээк маалымат үчүн караңыз `border-image-slice`.
калыңдык	Касиет рамканын көрүнгөн бөлүгүнүн туурасын башкарат, аны масштабдайт. Эгерде бул маани `border-width`тин туурасынан чоң болсо, рамканын сүрөтү мазмундун астына кирет. Мүмкүн болгон маанилер: CSS бирдиктери \| пайыздар \| сан \| `auto`. Кененирээк маалымат үчүн караңыз `border-image-width`.
жылдыруу	Кызыктуу касиет, рамканы элементтин чектеринен тышкары жылдырууга мүмкүндүк берет. Терс маанилер колдоого алынбайт. Мүмкүн болгон маанилер: CSS бирдиктери (% эмес (?)) \| оң сан \| auto. Кененирээк маалымат үчүн караңыз `border-image-outset`.
кайталоо	Чек араларда сүрөттү кандай кайталоону көрсөтөт (бурчтарда эмес): тайгалануу же созулуу. Мүмкүн болгон маанилер: `stretch` \| `repeat` \| `round` \| `space`. Кененирээк маалымат үчүн караңыз `border-image-repeat`.

Демейки маани: none 100%/1/0 stretch (url(сүрөткө жол) кесилиш/калыңдык/жылдыруу кайталоо).

Мисал . border-image-repeat: repeat мааниси

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Мисал . border-image-repeat: stretch мааниси

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Мисал . border-image-repeat: round мааниси

Азыркы учурда кадимки абалда repeat мааниси коюлган, чачыратканда - round мааниси. Чачыратканга чейин чек арага ромбиктердин бүтүн эмес саны сыйганына, ал эми чачыраткандан кийин - бүтүн сан сыйганына көңүл буруңуз. round ушундай иштейт:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Мисал . border-image-repeat: эки сөз

Туурасы үчүн repeat мааниси жана бийиктиги үчүн stretch мааниси:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Мисал . Сүрөттүн туурасы менен чек аранын туурасынын дал келиши

Чычкан курсорду чачыратканда border-widthты көбөйтөбүз, ал эми border-imageтын калыңдыгын ошол эле кылып калтырабыз. Ромбиктер бүткүл чек арага созулат:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Мисал . border-image-slice

Башка сүрөттү алалы, анда ар кандай бөлүктөр бирдей эмес:

Сүрөттөн кайсы бөлүктөрдү кесүү керектигин көрсөтөлү - 25% 30% 10% 20%. Бул мындай иштейт: 25% - жогорудан жылдыруу, 30% - оңдон жылдыруу, 10% - төмөнөн жылдыруу, 20% - солдон жылдыруу. Негизи бул бөлүктөр менен биз бурчтарды кесебиз. Жогорку сол бурч 25% сүрөттүн жогорку жагынан, жана 20% сол жагынан бөлүнөт. Жогорку оң бурч 25% сүрөттүн жогорку жагынан, жана 30% оң жагынан бөлүнөт жана ушундай.

Ошондой эле, эгер сиз чычкан курсорду блокко чачыратсаңыз, fill ачкыч сөзү ишке кирет, жана борбордук бөлүгү сүрөттүн биздин блоктун фоны болуп калат:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Мисал

линейдик градиент жардамы менен градиенттүү чек ара жасайлы:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Мисал . border-image-width

border-image-widthтын маанисин 2 кылабыз (чек аранын сүрөтү 2 эсе чейин чоңоёт) элементке чычкан курсор чачыратканда (26/2 - кыйгач сызыктан кийин көрсөтүлдү, ал эми 26 - бул border-image-sliceтын мааниси). Чек аранын өзү чоңойбогонуна, ал эми чек аранын сүрөтү - чоңойгонуна, анткени ал тексттин астына кирет:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Мисал . border-image-outset

border-image-outsetтын маанисин 3 кылабыз элементке чычкан курсор чачыратканда. (26/1/2 - экинчи кыйгач сызыктан кийин көрсөтүлдү, ал эми 26 - бул border-image-sliceтын мааниси, жана - 1 - border-image-width):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ошондой эле караңыз

border-image-source касиети,
ал чек ара үчүн сүрөткө жол берет
border-image-slice касиети,
ал чек ара үчүн сүрөттү бөлүүнү берет
border-image-repeat касиети,
ал чек ара үчүн сүрөттү кайталоону берет
border-image-width касиети,
ал чек ара үчүн сүрөттүн өлчөмүн берет
border-image-outset касиети,
ал чек ара үчүн сүрөттү жылдырууну берет