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
Selektor {
outline-offset: Wert;
}
Beispiel . Positiver Wert
Die Umrisslinie versetzt vom Element (es ist mit Hintergrund hervorgehoben):
<div id="elem"></div>
#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:
<div id="elem"></div>
#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):
<div id="elem"></div>
#elem {
outline-offset: -14px;
outline: 4px solid green;
border: 4px solid red;
width: 300px;
height: 100px;
}
:
Siehe auch
-
die Eigenschaft
outline-width,
die die Dicke der Umrisslinie festlegt -
die Eigenschaft
outline-style,
die den Stil der Umrisslinie festlegt -
die Eigenschaft
outline-color,
die die Farbe der Umrisslinie festlegt -
die Eigenschaft
outline,
die eine Kurzschreibweise für Umrisslinien ist
