Уласцівасць 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,
якое задае зрушэнне выявы для мяжы