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.
<'outline-width'>
Legt die Dicke der Umrisslinie fest. Standardeinstellung ist medium, wenn nicht vorhanden. Siehe outline-width.

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: eine absolute L├Ąnge; falls das Schl├╝sselwort none angegeben wurde, ist der berechnete Wert 0
  • outline-style: wie angegeben
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

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