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 legt die meisten 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 rgb(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;
}

Bestandteile der Eigenschaft

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 dabei keine Rolle. Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Teilwerte auf ihren Anfangswert gesetzt.

Hinweis: Die Umrandung wird bei vielen Elementen unsichtbar sein, wenn ihr Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig none ist. Eine bemerkenswerte Ausnahme sind input-Elemente, denen von Browsern standardmäßig ein Stil zugewiesen wird.

Werte

<'outline-width'>: Legt die Dicke der Umrandung fest. Wenn nicht vorhanden, ist der Standardwert medium. Siehe outline-width.
<'outline-style'>: Bestimmt den Stil der Umrandung. Wenn nicht vorhanden, ist der Standardwert none. Siehe outline-style.
<'outline-color'>: Legt die Farbe der Umrandung fest. Standardmäßig invert für unterstützende Browser, currentcolor für die anderen. Siehe outline-color.

Beschreibung

Die Umrandung ist eine Linie außerhalb des Randes des Elements. Im Gegensatz zu anderen Bereichen des Kastens nimmt die Umrandung keinen Platz ein, sodass sie das Layout des Dokuments in keiner Weise beeinflusst.

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

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

Barrierefreiheit

Das Zuweisen von outline mit einem Wert von 0 oder none entfernt den standardmäßigen Fokus-Stil des Browsers. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokusindikator haben. Stellen Sie einen offensichtlichen Fokus-Stil bereit, wenn der Standardfokus-Stil 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 Fokus-Stil 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