outline

Das outline CSS Eigenschaftskürzel setzt alle outline Eigenschaften in einer einzigen Deklaration.

Bestandteileigenschaften

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

Syntax

/* style */
outline: solid;

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

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

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

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

Die outline Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.

Hinweis: Der Umriss ist für viele Elemente unsichtbar, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf keinen Stil eingestellt ist: none. Eine bemerkenswerte Ausnahme bilden input Elemente, die von den Browsern als Standard-Stil vorgegeben werden.

Values

<'outline-color'>
Legt die Farbe des Umrisses fest. Standardeinstellung ist die currentcolor (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe outline-color.
<'outline-style'>
Legt den Stil des Umrisses fest. Standardeinstellung ist none, wenn nicht vorhanden. Siehe outline-style (en-US).
<'outline-width'>
Legt die Dicke der Umrisslinie fest. Standardeinstellung ist medium, wenn nicht vorhanden. Siehe outline-width (en-US).

Beschreibung

Borders und outline sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:

  • Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
  • Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.

Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Initialwert gesetzt.

Bedenken zu Zugänglichkeit

Wenn Sie outline den Wert von 0 oder none zuweisen, wird der Standard-Fokussierungsstil des Browsers entfernt. Wenn ein Element mit ihm interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.

Formale Definition

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • outline-color: Für das Schlüsselwort invert ist der berechnete Wert invert. 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).
  • outline-width (en-US): eine absolute Länge; falls das Schlüsselwort none angegeben wurde, ist der berechnete Wert 0
  • outline-style (en-US): wie angegeben
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

[ <'outline-color'> || <'outline-style'> (en-US) || <'outline-width'> (en-US) ]

Beschreibung

Verwendung von Umrissen zum Setzen eines Fokusstils

HTML

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

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

Spezifikation Status Kommentar
CSS Basic User Interface Module Level 3
Die Definition von 'outline' in dieser Spezifikation.
Empfehlung Keine Änderung.
CSS Level 2 (Revision 1)
Die Definition von 'outline' in dieser Spezifikation.
Empfehlung Anfangsdefinition

Browser Kompatibilität

BCD tables only load in the browser