outline CSS-Eigenschaft

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 Kurzschreibweise für die folgenden CSS-Eigenschaften:

• outline-width
• outline-style
• outline-color

Syntax

/* 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 ausgelassene Teilwerte auf ihren Anfangswert gesetzt.

Werte

<'outline-width'>

Ein <line-width>-Wert, der die Dicke der Umrandung festlegt. Wird auf medium gesetzt, falls nicht vorhanden. Siehe outline-width.

<'outline-style'>

Legt den Stil der Umrandung fest. Wird auf none gesetzt, falls nicht vorhanden. Siehe outline-style.

<'outline-color'>

Legt die Farbe der Umrandung 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 nehmen Outlines keinen Platz ein, sodass sie das Layout des Dokuments in keiner Weise beeinflussen.

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

Eine Umrandung muss nicht rechteckig sein: Bei mehrzeiligem Text wird von einigen Browsern für jede Zeilenbox eine Umrandung gezeichnet, während andere den gesamten Text mit einer einzigen Umrandung umschließen.

Barrierefreiheit

Das Zuweisen eines Werts von 0 oder none an outline entfernt den Standardfokusstil des Browsers. Wenn mit einem Element interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.

• Anleitung zur Gestaltung nützlicher und benutzbarer Fokusindikatoren
• WCAG 2.1: Erklärung des Erfolgskriteriums 2.4.7: Fokus sichtbar

Formale Definition

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,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

<outline-line-style> = 
  none    |
  auto    |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

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

HTML

<a href="#">This link has a special focus style.</a>

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

Browser-Kompatibilität

Siehe auch

• outline-width
• outline-style
• outline-color
• border