Својството 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,
кое го задава поместувањето на сликата за границата