Свойство outline-offset

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

Синтаксис

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

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

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

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

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

Результат:

Мисал . Терс маани

Рамка элементтин ичинде:

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

css#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 калыңдыгы менен "жеп" койду):

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

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

Результат:

Ошондой эле караңыз