Vetija outline-offset

Vetija outline-offset përcakton zhvendosjen e kornizës së jashtme - kufirit i cili nuk zë vend. Vlera e vetisë janë çdo njësi për përmasa, përveç përqindjeve. Vlera e paracaktuar: 0. Një vlerë pozitive e zhvendos kornizën nga jashtë elementit, një vlerë negative - nga brenda.

Sintaksa

përzgjedhësi {
	outline-offset: vlera;
}

Shembull . Vlerë pozitive

Korniza zhvendoset nga elementi (ai është theksuar me sfond):

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

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

Shembull . Vlerë negative

Korniza ndodhet brenda elementit:

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

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

Shembull . Vlerë negative outline + border

Mund të bëhet një efekt i tillë interesant (kushtojini vëmendje trashësisë së hendekut të bardhë midis kufijve, ai është 10px, jo 14, pasi një pjesë e hëngri outline me trashësinë e tij prej 4px):

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

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

Shihni gjithashtu

vetia outline-width,
e cila përcakton trashësinë e kornizës
vetia outline-style,
e cila përcakton stilin e kornizës
vetia outline-color,
e cila përcakton ngjyrën e kornizës
vetia outline,
e cila është vetia e shkurtuar për kornizat