Свойство 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 чапдан кесиб олиш. Картинканинг қайси қисми чап юқори бурчакка тушadi? Бу куйидаги бўлак бўлади: 10 юқоридан, 40 чапдан. Ўнг юқори бурчакка 10 юқоридан, 20 ўнгдан тушadi. Ва ҳоказо.

Кўпинча картинка симметрик бўлади (юқоридаги ромблар каби) ва биз бурчаклар учун тенг бўлакларни кесиб олишимиз керак. Бундай ҳолатда битта қиймат кўрсатилади, у барча томонлардан бир хил силжишларни белгилайди. Ҳаворанг ромбларни кесиб олиш учун биз slice ни 26 га кўрсатамиз (чунки ҳаворанг ромб ўлчами 26px га 26px). Сариқ ромблар граница чизикларига тушadi ва улар билан куйидаги содир бўлади: улар ёки бутун блок бўйлаб чўзилади ёки граница бўйлаб такрорланади (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,
у граница учун картинкани силжитишни белгилайди