CSS-Eigenschaft outline

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

Bestandteileigenschaften

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;

Werte

Diese Eigenschaft wird als ein, zwei oder drei Werte aus der folgenden Liste angegeben:

<'outline-width'>

Ein <line-width>-Wert, der die Dicke der Kontur festlegt. Falls nicht angegeben, ist der Standardwert medium. Siehe outline-width.

<'outline-style'>

Legt den Stil der Kontur fest. Falls nicht angegeben, ist der Standardwert none. Siehe outline-style.

<'outline-color'>

Legt die Farbe der Kontur fest. Der Standardwert ist invert für Browser, die diesen Wert unterstützen, und currentColor für die anderen. Siehe outline-color.

Beschreibung

Die Kurzschreibweise outline legt Stil, Farbe und Breite der Kontur eines Elements fest. Sie kann mit einem, zwei oder drei Werten angegeben werden. Die Reihenfolge der Werte spielt keine Rolle. Nicht angegebene Teilwerte werden auf ihren Initialwert gesetzt.

Die Kontur ist bei vielen Elementen unsichtbar, wenn ihr Stil nicht definiert ist. Das liegt daran, dass der Stil standardmäßig none ist. Eine bemerkenswerte Ausnahme bilden input-Elemente, denen Browser ein Standard-Styling zuweisen.

Eine Kontur ist eine Linie außerhalb des Rahmens eines Elements. Anders als andere Bereiche der Box nehmen Konturen keinen Platz ein und beeinflussen daher das Layout des Dokuments in keiner Weise.

Einige Eigenschaften beeinflussen das Erscheinungsbild einer Kontur. Stil, Farbe und Breite können mit der Eigenschaft outline geändert werden, der Abstand zum Rahmen mit der Eigenschaft outline-offset und die Eckwinkel mit der Eigenschaft border-radius.

Eine Kontur muss nicht rechteckig sein: Bei mehrzeiligem Text zeichnen einige Browser für jede Zeilenbox eine separate Kontur, während andere den gesamten Text mit einer einzigen Kontur umschließen.

Barrierefreiheit

Das Zuweisen des Werts 0 oder none zu outline entfernt den standardmäßigen Fokusstil des Browsers. Wenn mit einem Element interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Stellen Sie eine deutliche Fokusformatierung bereit, wenn der standardmäßige Fokusstil entfernt wird.

• Anleitung zum Entwerfen hilfreicher und nutzbarer Fokusindikatoren
• WCAG 2.1: Erfolgskriterium 2.4.7 verstehen: 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

outline verwenden, um einen Fokusstil festzulegen

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