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 Kurzschreibweise legt die meisten der Outline-Eigenschaften in einer einzigen Deklaration fest.

Probieren Sie es aus

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgba(170, 50, 220, 0.6);
border-radius: 2rem;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  padding: 0.75rem;
  width: 80%;
  height: 100px;
}

Ausführende Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 Kurzschreibweisen werden ausgelassene Unterwerte auf ihren Anfangswert gesetzt.

Hinweis: Die Outline ist für viele Elemente unsichtbar, wenn ihr Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig none ist. Eine bemerkenswerte Ausnahme sind input-Elemente, denen von den Browsern ein Standardstil zugewiesen wird.

Werte

<'outline-width'>: Legt die Dicke der Outline fest. Standardmäßig medium, wenn nicht angegeben. Siehe outline-width.
<'outline-style'>: Legt den Stil der Outline fest. Standardmäßig none, wenn nicht angegeben. Siehe outline-style.
<'outline-color'>: Legt die Farbe der Outline fest. Standardmäßig invert für unterstützende Browser, currentcolor für andere. Siehe outline-color.

Beschreibung

Ein Outline ist eine Linie außerhalb des Rahmens eines Elements. Im Gegensatz zu anderen Bereichen der Box nimmt eine Outline keinen Raum ein und beeinflusst daher das Layout des Dokuments in keiner Weise.

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

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

Barrierefreiheit

Wenn outline auf einen Wert von 0 oder none gesetzt wird, wird der Standardfokusstil des Browsers entfernt. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokusanzeiger haben. Stellen Sie offensichtliche Fokusstile bereit, wenn der Standardfokusstil entfernt wird.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `outline-width`: `medium` `outline-style`: `none` `outline-color`: `auto`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie 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)`.
Animationstyp	wie die jeweiligen Kurzschreibweisen: `outline-width`: Längenangabe `outline-style`: by computed value type `outline-color`: Farbe

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 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