Gliederung - CSS-Tricks | CSS-Almanach 2025

Die outlineEigenschaft in CSS zeichnet eine Linie um die Außenseite eines Elements. Es ist ähnlich wie Grenze, außer dass:

Es geht immer um alle Seiten, Sie können keine bestimmten Seiten angeben
Es ist kein Teil des Box-Modells, hat also keinen Einfluss auf die Position des Elements oder benachbarter Elemente (gut zum Debuggen!)

Andere kleinere Tatsachen sind, dass es den Randradius nicht berücksichtigt (was vermutlich keinen Sinn macht, da es kein Rand ist) und dass es nicht immer rechteckig ist. Wenn der Umriss beispielsweise ein Inline-Element mit unterschiedlichen Schriftgrößen umgibt, zeichnet Opera ein versetztes Feld um alles.

Es wird häufig aus Gründen der Barrierefreiheit verwendet, um einen Link hervorzuheben, wenn er mit Registerkarten versehen ist, ohne die Position zu beeinflussen, und auf andere Weise als beim Schweben.

a:focus ( outline: 1px dashed red; )

Kurzschrift

outline: ( || || ) | inherit

Es werden die gleichen Eigenschaften wie bei border verwendet, jedoch mit "Outline-".

Die obige Kurzschrift könnte geschrieben worden sein:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Anmerkungen

Sie können einen Umriss nicht nur auf einer (oder zwei oder drei) Seiten eines Elements festlegen. Nur alle Seiten. Es gibt nicht so etwas wie outline-top, outline-right, outline-bottomoder outline-leftwie es mit ist border.
Versuchen Sie, die Konsole auf einer beliebigen Website zu öffnen und auszuführen. Auf document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");diese Weise werden viele Websites strukturiert.
outlinewird :focusstandardmäßig für Stile verwendet. Denken Sie daran, dass Sie outlineStile, wenn Sie sie jemals entfernen , wieder a:focus ( outline: 0; )hinzufügen müssen, indem Sie einen anderen visuell unterschiedlichen Stil verwenden.