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 setzt die meisten Outline-Eigenschaften in einer einzigen Deklaration.

Probieren Sie es aus

Bestehende 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 outline-Eigenschaft 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 Anfangswert gesetzt.

Hinweis: Der Umriss wird für viele Elemente unsichtbar sein, wenn sein Stil nicht definiert ist. Das liegt daran, dass der Stil standardmäßig auf none gesetzt ist. Eine bemerkenswerte Ausnahme sind input Elemente, die von Browsern mit einem Standardstil versehen werden.

Werte

<'outline-width'>

Legt die Dicke des Umrisses fest. Standardmäßig medium, wenn nicht vorhanden. Siehe outline-width.

<'outline-style'>

Legt den Stil des Umrisses fest. Standardmäßig none, wenn nicht vorhanden. Siehe outline-style.

<'outline-color'>

Legt die Farbe des Umrisses fest. Standardmäßig invert für unterstützende Browser, currentcolor für die anderen. Siehe outline-color.

Beschreibung

Der Umriss ist eine Linie außerhalb des Rahmens eines Elements. Anders als andere Bereiche der Box beanspruchen Umrisse keinen Platz, sie beeinflussen das Layout des Dokuments also in keiner Weise.

Es gibt einige Eigenschaften, die das Erscheinungsbild eines Umrisses beeinflussen. Es ist möglich, den Stil, die Farbe und die Breite mit der outline-Eigenschaft zu ändern, den Abstand vom Rahmen mit der outline-offset-Eigenschaft und die Eckenwinkel mit der border-radius-Eigenschaft.

Ein Umriss muss nicht rechteckig sein: Bei mehrzeiligem Text zeichnen einige Browser einen Umriss für jede Zeilenbox separat, während andere den gesamten Text mit einem einzigen Umriss umgeben.

Barrierefreiheit

Das Zuweisen eines outline-Wertes von 0 oder none entfernt den Standardfokusstil des Browsers. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokusindikator haben. Stellen Sie einen offensichtlichen Fokusstil bereit, wenn der Standardfokusstil 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

Verwenden von Umrissen, um einen Fokusstil festzulegen

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

BCD tables only load in the browser

Siehe auch