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

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 Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 spezifiziert werden. Die Reihenfolge der Werte ist dabei unerheblich. Wie bei allen Kurzschreibweisen werden alle ausgelassenen Unterwerte auf ihren Initialwert gesetzt.

Hinweis: Das Outline wird für viele Elemente unsichtbar sein, wenn dessen Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf none gesetzt ist. Eine bemerkenswerte Ausnahme sind input-Elemente, denen von den Browsern eine Standardstilistik gegeben wird.

Werte

<'outline-width'>: Setzt die Dicke des Outlines. Standard ist medium, falls nicht angegeben. Siehe outline-width.
<'outline-style'>: Setzt den Stil des Outlines. Standard ist none, falls nicht angegeben. Siehe outline-style.
<'outline-color'>: Setzt die Farbe des Outlines. Standard ist invert für Browser, die dies unterstützen, currentColor für die anderen. Siehe outline-color.

Beschreibung

Outline ist eine Linie außerhalb des Rahmens eines Elements. Im Gegensatz zu anderen Bereichen der Box nehmen Outlines keinen Platz ein, sodass sie das Layout des Dokuments in keiner Weise beeinflussen.

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

Ein Outline muss nicht rechteckig sein: Bei mehrzeiligem Text ziehen einige Browser ein Outline für jede Line-Box separat, während andere den gesamten Text mit einem einzigen Outline umschließen.

Barrierefreiheit

Einem Outline den Wert 0 oder none zuzuweisen, entfernt den Standard-Fokusstil des Browsers. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für einen offensichtlichen Fokusstil, wenn der Standard-Fokusstil 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                  |
  <'border-top-color'>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<border-top-color> = 
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

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