outline

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨März 2023⁩.

Die outline CSS Kurzschreibweise 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;
}

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css

/* style */
outline: solid;

/* style | color */
outline: dashed #ff6666;

/* 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 alle weggelassenen 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 auf none gesetzt ist. Eine bemerkenswerte Ausnahme sind input-Elemente, die von Browsern standardmäßig formatiert werden.

Werte

<'outline-width'>: Legt die Dicke der Umrandung fest. Standardwert ist medium, wenn nicht angegeben. Siehe outline-width.
<'outline-style'>: Legt den Stil der Umrandung fest. Standardwert ist none, wenn nicht angegeben. Siehe outline-style.
<'outline-color'>: Legt die Farbe der Umrandung fest. Standardwert ist invert für Browser, die es unterstützen, currentColor für die anderen. Siehe outline-color.

Beschreibung

Eine Umrandung ist eine Linie außerhalb des Randes eines Elements. Im Gegensatz zu anderen Bereichen der Box nimmt die Umrandung keinen Platz ein und beeinflusst daher das Layout des Dokuments in keiner Weise.

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 zum 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 für jede Zeilenbox separat, während andere den gesamten Text mit einer einzigen Umrandung umgeben.

Barrierefreiheit

Wenn outline ein Wert von 0 oder none zugewiesen wird, wird der Standard-Fokus-Stil des Browsers entfernt. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokus-Indikator haben. Sorgen Sie für einen eindeutigen Fokus-Stil, wenn der Standard-Fokus-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

Fokus-Stil mit outline festlegen

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 #ee7733;
  outline-offset: 4px;
  background: #ffffaa;
}

Ergebnis

Spezifikationen

Specification
CSS Basic User Interface Module Level 4 # outline

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden