Својството 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,
кое е кратенка за својствата на рамките