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

Probieren Sie es aus

Bestandteile der 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 Shorthand-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Anfangswert gesetzt.

Hinweis: Die Outline wird für viele Elemente unsichtbar sein, wenn ihr Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf none gesetzt ist. Eine bemerkenswerte Ausnahme sind <input>-Elemente, die von den Browsern eine Standardstil erhalten.

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 für unterstützende Browser, currentcolor für andere. Siehe outline-color.

Beschreibung

Eine Outline ist eine Linie außerhalb des Rahmens eines Elements. Anders als andere Bereiche der Box beanspruchen Outlines keinen Platz, sodass sie das Layout des Dokuments in keiner Weise beeinflussen.

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

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

Barrierefreiheit

Das Zuweisen eines Wertes von 0 oder none zur outline-Eigenschaft entfernt den Standardfokus-Stil des Browsers. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für offensichtliches Fokus-Styling, wenn der Standardfokus-Stil entfernt wird.

Formale Definition

Initialer Wertwie 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 zur Einstellung eines Fokus-Stils

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