Уласцівасць outline-offset

Уласцівасць outline-offset задае адступ вонкавай рамкі - мяжы, якая не займае месца. Значэннем уласцівасці служаць любыя адзінкі вымярэння памераў, акрамя працэнтаў. Значэнне па змаўчанні: 0. Дадатнае значэнне зрушчае рамку вонкі ад элемента, адмоўнае - ўнутр.

Сінтаксіс

селектар {
	outline-offset: значэнне;
}

Прыклад . Дадатнае значэнне

Рамка адступае ад элемента (ён вылучаны фоном):

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

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Прыклад . Адмоўнае значэнне

Рамка знаходзіцца ўнутры элемента:

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

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Прыклад . Адмоўнае значэнне outline + border

Можна зрабіць такі цікавы эфект (звярніце ўвагу на таўшчыню белага прамежку паміж мяжамі, ён 10px, а не 14, так як частку з'еў outline сваёй таўшчынёй у 4px):

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

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

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

уласцівасць outline-width,
якая задае таўшчыню рамкі
уласцівасць outline-style,
якая задае стыль рамкі
уласцівасць outline-color,
якая задае колер рамкі
уласцівасць outline,
якая з'яўляецца ўласцівасцю-скарачэннем для рамак