Az outline-offset tulajdonság

A outline-offset tulajdonság a külső körvonal - azon szegély behúzását határozza meg, amely nem foglal helyet. A tulajdonság értéke bármely mértékegység a méretekhez lehet, kivéve százalékot. Alapértelmezett érték: 0. Pozitív érték a körvonalat kifelé tolja el az elemtől, negatív érték - befelé.

Szintaxis

szelektor {
	outline-offset: érték;
}

Példa . Pozitív érték

A körvonal eltávolodik az elemtől (az elem hátterrel van kiemelve):

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

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

Példa . Negatív érték

A körvonal az elem belsejében helyezkedik el:

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

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

Példa . Negatív outline + border érték

Elkészíthető egy ilyen érdekes hatás (figyelj a fehér rés szélességére a szegélyek között, az 10px, nem 14, mert egy részét elvette a outline a maga 4px vastagságával):

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

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

Lásd még

a outline-width tulajdonság,
amely a körvonal vastagságát határozza meg
a outline-style tulajdonság,
amely a körvonal stílusát határozza meg
a outline-color tulajdonság,
amely a körvonal színét határozza meg
a outline tulajdonság,
amely a körvonalak rövidített tulajdonsága