Свойство outline-offset

Свойство outline-offset ўрин босмайдиган ташги рамканинг жойлашишини белгилайди. Свойство қиймати ўлчов учун ишлатиладиган ҳар қандай ўлчов бирликлари бўлиши мумкин, фоизлардан ташқари. Андоза қиймати: 0. Мусбат қиймат рамкани элементдан ташқари томонга силжитади, манфий қиймат - ички томонга.

Синтаксис

селектор {
	outline-offset: қиймат;
}

Мисол . Мусбат қиймат

Рамка элементдан (у орқа фон билан ajратиб қўйилган) четга силжийди:

<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,
рамканинг рангini белгилайди
свойство outline,
рамкалар учун қисқартирилган свойство бўлиб хизмат қилади