Vlastnosť outline-offset

Vlastnosť outline-offset nastavuje odsadenie vonkajšieho obrysu - hranice, ktorá nezaberá miesto. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosti, okrem percent. Predvolená hodnota je: 0. Kladná hodnota posúva obrys von od prvku, záporná - dovnútra.

Syntax

selektor {
	outline-offset: hodnota;
}

Príklad . Kladná hodnota

Obrys sa odsadzuje od prvku (prvok je zvýraznený pozadím):

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

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

Príklad . Záporná hodnota

Obrys sa nachádza vo vnútri prvku:

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

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

Príklad . Záporná hodnota outline + border

Môžete vytvoriť takýto zaujímavý efekt (venujte pozornosť hrúbke bieleho medzery medzi hranicami, je 10px, nie 14, pretože časť zjedol outline svojou hrúbkou 4px):

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

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

Pozri tiež

vlastnosť outline-width,
ktorá nastavuje hrúbku obrysu
vlastnosť outline-style,
ktorá nastavuje štýl obrysu
vlastnosť outline-color,
ktorá nastavuje farbu obrysu
vlastnosť outline,
ktorá je skrátenou vlastnosťou pre obrysy