outline

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die outline CSS Kurzform-Eigenschaft definiert die meisten Outline-Eigenschaften in einer einzigen Deklaration.

Probieren Sie es aus

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* style */
outline: solid;

/* style | color */
outline: dashed #f66;

/* width | style */
outline: thick inset;

/* width | style | color*/
outline: 3px solid green;

/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

Die Eigenschaft outline kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt keine Rolle. Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Teilwerte auf ihren Initialwert gesetzt.

Hinweis: Die Outline wird für viele Elemente unsichtbar sein, wenn ihr Stil nicht definiert ist. Das liegt daran, dass der Standardstil none ist. Eine bemerkenswerte Ausnahme bilden input-Elemente, die von den Browsern mit einem Standardstil versehen werden.

Werte

<'outline-width'>

Legt die Dicke der Outline fest. Standardwert ist medium, falls nicht angegeben. Siehe outline-width.

<'outline-style'>

Legt den Stil der Outline fest. Standardwert ist none, falls nicht angegeben. Siehe outline-style.

<'outline-color'>

Legt die Farbe der Outline fest. Standardwert ist invert bei unterstützenden Browsern, ansonsten currentcolor. Siehe outline-color.

Beschreibung

Die Outline ist eine Linie außerhalb des border eines Elements. Im Gegensatz zu anderen Bereichen der Box nimmt die Outline keinen Platz ein und beeinflusst somit das Layout des Dokuments in keiner Weise.

Es gibt einige Eigenschaften, die das Erscheinungsbild einer Outline beeinflussen. Der Stil, die Farbe und die Breite können mit der outline-Eigenschaft geändert werden, der Abstand vom Rand mit der outline-offset-Eigenschaft und die Eckenwinkel mit der border-radius-Eigenschaft.

Eine Outline muss nicht rechteckig sein: Bei mehrzeiligem Text zeichnen einige Browser für jede Zeilenbox separat eine Outline, während andere den gesamten Text mit einer einzigen Outline umrahmen.

Barrierefreiheit

Das Zuweisen des Wertes 0 oder none zur Eigenschaft outline entfernt den Standard-Fokus-Stil des Browsers. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokus-Indikator haben. Sorgen Sie für deutliche Fokus-Stilierungen, falls der Standard-Fokus-Stil entfernt wird.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • outline-width: eine absolute Länge; falls das Schlüsselwort none angegeben wurde, ist der berechnete Wert 0
  • outline-style: wie angegeben
  • outline-color: Für das Schlüsselwort auto ist der berechnete Wert currentcolor. Für den Farbwert, falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das Schlüsselwort transparent wird zu rgba(0,0,0,0).
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

outline = 
<'outline-width'> ||
<'outline-style'> ||
<'outline-color'>

<outline-width> =
<line-width>

<outline-style> =
auto |
<outline-line-style>

<outline-color> =
auto |
<color> |
<image-1D>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<image-1D> =
<stripes()>

<stripes()> =
stripes( <color-stripe># )

<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?

<length-percentage> =
<length> |
<percentage>

Beispiele

Verwendung von Outline, um einen Fokus-Stil zu setzen

HTML

html
<a href="#">This link has a special focus style.</a>

CSS

css
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

Ergebnis

Spezifikationen

Specification
CSS Basic User Interface Module Level 4
# outline

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch