Die outline-offsetEigenschaft in CSS versetzt einen definierten Umriss von der Randkante eines Elements um einen bestimmten Betrag. Ein Umriss, der sich von einem Rahmen unterscheidet, nimmt keinen Platz auf der Seite ein (wie ein absolut positioniertes Element), sodass der Umriss in beliebiger Höhe versetzt werden kann und die Position oder das Layout der umgebenden Elemente nicht beeinflusst wird.
.example ( outline: solid 2px blue; outline-offset: 10px; )Mit der outlineEigenschaft definierte Konturen werden häufig als Fokusringe verwendet, um die Zugänglichkeit zu gewährleisten. Somit outline-offsetkönnen Sie mit der Eigenschaft die Position des Fokusrings ändern.
Werte
outline-offset akzeptiert eine Art von Wert, eine Länge, die sein kann:
0(der Standard)- Jede andere gültige Länge mit einer bestimmten Einheit (einschließlich negativer Werte)
Beachten Sie, dass outline-offsetwie outline-widthauch keine Prozentwerte akzeptiert werden.
Positionierung der Gliederung
Standardmäßig wird der Umriss eines Elements unmittelbar außerhalb des Rahmens gezeichnet (oder unmittelbar außerhalb des Bereichs, an dem der Rand gezeichnet würde, wenn ein Rand definiert würde). Daher ist es technisch möglich, Umriss und Rand für einen Zwei-Rand-Effekt zu kombinieren:
Von dort aus outline-offsetkann die Position des Umrisses relativ zur Randkante geändert werden. Probieren Sie die folgende Demo aus, mit der Sie den Versatzwert der Gliederung mithilfe des Schiebereglers interaktiv ändern können. Der Wert des Versatzes wird auf der Seite angezeigt, wenn Sie den Schieberegler bewegen:
Akzeptiert, wie oben erwähnt, outline-offsetnegative Werte, die den Umriss in die entgegengesetzte Richtung (zur Mitte des Elements) verschieben, wie in der nächsten interaktiven Demo gezeigt. Beachten Sie, dass die Gliederung bei -40 Pixel beginnt:
Wenn Sie die obige Demo in Firefox anzeigen, werden Sie feststellen, dass die Kontur zunächst korrekt angezeigt wird. Wenn der Schieberegler jedoch angepasst wird, wird die Kontur nicht reibungslos gerendert und befindet sich an der falschen Position. Wenn Sie das Element aus der Ansicht und dann wieder in die Ansicht scrollen, wird der Browser gezwungen, die Kontur an der richtigen Position neu zu zeichnen. Dies scheint nur ein Firefox-Fehler zu sein.
Nicht Teil der outlineKurzschrift
Ähnlich wie bei der borderEigenschaft, die outlineist Eigentum eine Abkürzung , die drei Eigenschaften darstellt: outline-color, outline-style, und outline-width.
Die outline-offsetEigenschaft wird daher in dieser oder einer anderen Kurzform-Eigenschaft nicht dargestellt, sodass sie getrennt von der definierten Gliederung selbst deklariert werden muss.
verbunden
- Gliederung
- Rand
Mehr Informationen
- Konturversatz auf W3C
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
„Partielle“ Indikator für IE bedeutet IE nicht unterstützt outline-offset, unterstützt jedoch outlineStenografie und die drei Eigenschaften , die es darstellt.
Zusätzlich zu dem oben im Abschnitt „Positionieren der Gliederung“ erwähnten Fehler gibt es in Firefox einen Fehler, bei dem die Gliederung falsch gezeichnet wird, wenn das Element ein untergeordnetes Element hat, das die übergeordnete Grenze überschreitet (z. B. mit negativen Rändern oder absoluter Positionierung). . Daher bezieht sich der outline-offsetWert auf die erweiterte Grenze, die vom überlaufenden untergeordneten Element erstellt wurde, und nicht auf die ursprünglichen übergeordneten Elementgrenzen. Um dies besser zu verstehen, lesen Sie diesen CodePen, diesen Stapelüberlauf-Thread und diesen Fehlerbericht (Dank an Leser Matt Vanes für das Senden dieses Fehlers).