Eigenschaft outline-offset

Die Eigenschaft outline-offset legt den Versatz der äußeren Umrisslinie fest - einer Grenzlinie, die keinen Platz einnimmt. Als Wert der Eigenschaft dienen alle Einheiten für Größen, außer Prozent. Standardwert: 0. Ein positiver Wert schiebt die Umrisslinie nach außen vom Element weg, ein negativer - nach innen.

Syntax

cssSelektor {
  outline-offset: Wert;
}

Beispiel . Positiver Wert

Die Umrisslinie versetzt vom Element (es ist mit Hintergrund hervorgehoben):

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;
}

Результат:

Beispiel . Negativer Wert

Die Umrisslinie befindet sich innerhalb des Elements:

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;
}

Результат:

Beispiel . Negativer outline + border Wert

Man kann diesen interessanten Effekt erzielen (achten Sie auf die Dicke des weißen Zwischenraums zwischen den Grenzlinien, er ist 10px, nicht 14, da ein Teil davon von der outline mit ihrer Dickeneinstellung von 4px verdeckt wird):

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

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

Результат:

Siehe auch