Свойство outline-offset

Свойство outline-offset сырткы кашаланын (рамканын) чегин аныктайт. Ал орун ээлебеген чекти көрсөтөт. Касиеттин мааниси катары пайыздан башка өлчөм бирдиктери колдонулат. Басымдуу мааниси: 0. Оң маани элементтен сыртка карай рамканы жылдырат, терс маани ичкери карай жылдырат.

Синтаксис

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

Мисал . Оң маани

Рамка элементтен (ал фон менен көрсөтүлгөн) алыстайт:

<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,
рамканын түсүн аныктайт
касиет outline,
рамкалар үчүн кыскартылган касиет болуп саналат