Хусусияти 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,
ки ҷойивазкунии аксро барои чадвал муқаррар мекунад