Outline-offset häsiýeti

outline-offset häsiýeti ýeri eýelemeýän daşarky gapdalyk çäginiň aralygyny kesgitleýär. Häsiýetiň bahasy hökmünde, göterimlerden başga, islendik ölçeg birlikleri ulanylyp bilner. Dürüsi bahasy: 0. Positive baha gapdalygy elementden daşarky tarapa süýşürýär, negative baha bolsa içerki tarapa süýşürýär.

Sintaksis

selektory {
	outline-offset: baha;
}

Mysal . Positive baha

Gapdalyk elementden aralalyk alýar (element fon bilen bellikli):

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

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

Mysal . Negative baha

Gapdalyk elementiň içinde ýerleşýär:

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

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

Mysal . Outline + border bilen negative baha

Şeýle gyzykly effekt ýasamak mümkin (gapdalyklaryň arasyndaky ak aralygyň galyňlygyna üns beriň, ol 10px, 14 däl, sebäbi bir bölegi outline tarapyndan 4px galyňlykda iýildi):

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

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

Şeýle-de görüň

outline-width häsiýeti,
gapdalygyň galyňlygyny kesgitleýär
outline-style häsiýeti,
gapdalygyň stilini kesgitleýär
outline-color häsiýeti,
gapdalygyň reňkini kesgitleýär
outline häsiýeti,
gapdalyklar üçin gysgaldylan häsiýet bolup hyzmat edýär