DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft outline-offset verschiebt einen definierten Umriss (outline) vom Rand eines Elements um einen bestimmten Betrag weg. Ein Umriss, der sich von einem Rahmen (border) unterscheidet, nimmt keinen Platz auf der Seite ein (ähnlich einem absolut positionierten Element), sodass der Umriss beliebig verschoben werden kann, ohne die Position oder das Layout umliegender Elemente zu beeinflussen.
.example {
outline: solid 2px blue;
outline-offset: 10px;
}Umrisse, die mit der outline-Eigenschaft definiert werden, werden oft als Fokusringe für Barrierefreiheit verwendet. Daher können Sie mit der outline-offset-Eigenschaft die Position des Fokusrings ändern.
Werte
outline-offset akzeptiert einen Werttyp: eine Längenangabe, die sein kann:
0(Standardwert)- Jede andere gültige Längenangabe mit einer angegebenen Einheit (einschließlich negativer Werte)
Beachten Sie, dass outline-offset, wie outline-width, keine Prozentwerte akzeptiert.
Positionierung des Umrisses
Standardmäßig wird der Umriss eines Elements direkt außerhalb des Rahmens gezeichnet (oder direkt außerhalb der Stelle, wo der Rahmen gezeichnet würde, wenn ein Rahmen definiert wäre). Daher ist es technisch möglich, Umriss und Rahmen für einen zweifachen Rahmeneffekt zu kombinieren.
Von dort aus kann outline-offset verwendet werden, um die Position des Umrisses relativ zum Rand des Rahmens zu ändern. Probieren Sie die folgende Demo aus, mit der Sie den Offset-Wert des Umrisses interaktiv mit einem Schieberegler ändern können. Der Wert des Offsets wird auf der Seite angezeigt, während Sie den Schieberegler bewegen.
Wie oben erwähnt, akzeptiert outline-offset negative Werte, die den Umriss in die entgegengesetzte Richtung (zur Mitte des Elements hin) verschieben, wie in der folgenden interaktiven Demo gezeigt. Beachten Sie, dass der Umriss bei -40px beginnt.
Wenn Sie die obige Demo in Firefox betrachten, werden Sie feststellen, dass der Umriss zunächst korrekt angezeigt wird, aber wenn der Schieberegler angepasst wird, wird der Umriss nicht flüssig gerendert und landet an der falschen Position. Das Scrollen des Elements aus dem Sichtfeld und dann wieder hinein zwingt den Browser, den Umriss an der richtigen Position neu zu zeichnen. Dies scheint ein reiner Firefox-Bug zu sein.
Kein Teil des outline-Shorthand
Ähnlich wie die border-Eigenschaft ist die outline-Eigenschaft ein Shorthand, der drei Eigenschaften repräsentiert: outline-color, outline-style und outline-width.
Die Eigenschaft outline-offset wird daher in diesem oder einem anderen Shorthand nicht repräsentiert und muss separat vom definierten Umriss deklariert werden.
Verwandt
Weitere Informationen
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser das Feature ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 2.1 | 3.2 |
Der "partielle" Indikator für IE bedeutet, dass IE outline-offset nicht unterstützt, aber die outline-Shorthand und die drei von ihr repräsentierten Eigenschaften unterstützt.
Zusätzlich zu dem oben im Abschnitt "Positionierung des Umrisses" erwähnten Fehler gibt es in Firefox einen Fehler, bei dem der Umriss falsch gezeichnet wird, wenn das Element ein Kindelement hat, das den Begrenzungsrahmen des übergeordneten Elements überläuft (z. B. durch negative Abstände oder absolute Positionierung). Daher wird der Wert von outline-offset relativ zum erweiterten Begrenzungsrahmen des überlaufenden Kindes und nicht zum ursprünglichen Begrenzungsrahmen des übergeordneten Elements sein. Um dies besser zu verstehen, sehen Sie sich dieses CodePen, diesen Stack Overflow-Thread und diesen Fehlerbericht (dank geht an den Leser Matt Vanes für die Einsendung dieses Fehlers).