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

Bestandteilseigenschaften

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: Das Outline ist bei vielen Elementen unsichtbar, wenn sein 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 gestylt werden.

Werte

<'outline-width'>

Legt die Dicke des Outlines fest. Standardwert ist medium, falls nicht angegeben. Siehe outline-width.

<'outline-style'>

Legt den Stil des Outlines fest. Standardwert ist none, falls nicht angegeben. Siehe outline-style.

<'outline-color'>

Legt die Farbe des Outlines fest. Standardwert ist invert für Browser, die dies unterstützen, currentcolor für andere. Siehe outline-color.

Beschreibung

Das Outline ist eine Linie außerhalb des Rahmens des Elements. Anders als andere Bereiche der Box nehmen Outlines keinen Platz ein und beeinflussen das Layout des Dokuments in keiner Weise.

Es gibt einige Eigenschaften, die das Aussehen eines Outlines 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.

Ein Outline muss nicht rechteckig sein: Bei mehrzeiligem Text zeichnen einige Browser für jede Zeilenbox separat ein Outline, während andere das gesamte Textfeld mit einem einzigen Outline umschließen.

Barrierefreiheit

Das Zuweisen eines Werts von 0 oder none zu outline entfernt den Standardfokusstil des Browsers. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für deutlich erkennbare Fokusstile, 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

Nutzung 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch