Уласцівасць border-image-outset

Уласцівасць border-image-outset дазваляе адсунуць рамку за межы элемента. У якасці значэння паказваецца лік без пазначэння адзінак вымярэння або любыя адзінкі для памераў, акрамя працэнтаў. Калі паказана лік без адзінак, то яно з'яўляецца множнікам, на які памнажаецца значэнні ўласцівасці border-width. Адмоўныя значэнні не падтрымліваюцца.

Для больш падрабязнай інфармацыі па карцінках для мяжы глядзіце ўласцівасць border-image.

Сінтаксіс

селектар {
	border-image-outset: дадатныя лікі;
}

Прыклад . Лік

Усталюем значэнне border-image-outset у 3 па навядзенні мышкай на элемент. Пры гэтым мяжа зрушыцца на 26px*3 - у 3 разы далей, чым яе шырыня, зададзеная ў border-width:

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

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

Прыклад . Пікселі

Усталюем значэнне border-image-outset у 30px па навядзенні мышкай на элемент. Пры гэтым мяжа зрушыцца на 30px:

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

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

Глядзіце таксама

уласцівасць border-image,
якое з'яўляецца скарачэннем для мяжы-карцінкі
уласцівасць border-image-source,
якое задае шлях да карцінкі для мяжы
уласцівасць border-image-slice,
якое разбіццё карцінкі для мяжы
уласцівасць border-image-repeat,
якое паўтарэнне карцінкі для мяжы
уласцівасць border-image-width,
якое задае памер карцінкі для мяжы