outline-offset CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.
Die outline-offset CSS Eigenschaft legt den Abstand zwischen einem Kontur und dem Rand oder der Grenze eines Elements fest.
Probieren Sie es aus
outline-offset: 4px;
outline-offset: 0.6rem;
outline-offset: 12px;
outline: 5px dashed blue;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
border: 2px solid crimson;
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntax
css
/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;
/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;
Werte
<length>-
Die Breite des Abstands zwischen dem Element und seiner Kontur. Ein negativer Wert platziert die Kontur innerhalb des Elements. Ein Wert von
0platziert die Kontur so, dass es keinen Abstand zwischen ihr und dem Element gibt.
Beschreibung
Eine Kontur ist eine Linie, die um ein Element gezeichnet wird, außerhalb des Randbereichs. Der Raum zwischen einem Element und seiner Kontur ist transparent. Mit anderen Worten, es ist dasselbe wie der Hintergrund des übergeordneten Elements.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers |
| Animationstyp | Längenangabe |
Formale Syntax
outline-offset =
<length>
Beispiele
Festlegen des Outline-Offsets in Pixeln
HTML
html
<p>Gallia est omnis divisa in partes tres.</p>
CSS
css
p {
outline: 1px dashed red;
outline-offset: 10px;
background: yellow;
border: 1px solid blue;
margin: 15px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Basic User Interface Module Level 4 # outline-offset |