W3docs
de
Anmelden

CSS outline-width Eigenschaft

Die CSS-Eigenschaft outline-width legt die Breite des Umrisses eines Elements fest. Werte und Beispiele.

Die Eigenschaft outline-width legt die Stärke eines Umrisses fest — der Linie, die direkt außerhalb des Rahmens eines Elements gezeichnet wird. Sie funktioniert ähnlich wie border-width, jedoch mit einem wichtigen Unterschied: Ein Umriss nimmt keinen Platz im Box-Modell ein, sodass das Ändern von outline-width das Layout der umgebenden Elemente niemals verschiebt.

Da der Umriss außerhalb des Rahmens liegt und aus der Box ausgeschlossen ist, beinhalten width und height eines Elements nicht den Umriss. Genau deshalb ist der Umriss die standardmäßige Methode des Browsers, den Tastaturfokus anzuzeigen — der Fokusring kann erscheinen und verschwinden, ohne die Seite zu verschieben.

Diese Eigenschaft akzeptiert folgende Werte: medium, thin, thick, eine <length>, initial, inherit, revert und unset.

Wann outline-width verwendet werden sollte

  • Fokusindikatoren. Wenn Sie den Fokusring mit den Pseudoklassen :focus oder :focus-visible anpassen, steuert outline-width, wie deutlich dieser Ring sichtbar ist. Ein sichtbarer Fokusumriss ist wichtig für die Barrierefreiheit — setzen Sie ihn niemals auf 0 oder entfernen Sie den Umriss, ohne einen anderen sichtbaren Fokusstil bereitzustellen.
  • Hervorhebung ohne Reflow. Da der Umriss außerhalb der Box liegt, verschiebt ein dickerer Umriss beim Hover oder Fokus die benachbarten Elemente nicht, wie es ein dickerer Rahmen tun würde.
  • Layout-Debugging. Ein schnelles outline: 1px solid red ist eine beliebte Methode, um Element-Boxen zu visualisieren, ohne ihre Größe zu beeinflussen.
Info

outline-width wirkt sich nur aus, wenn outline-style auf einen anderen Wert als none (der Standard) gesetzt ist. Wenn der Stil none ist, hat der Umriss unabhängig von dem hier gesetzten Wert keine Breite. Die Kurzschreibweise outline setzt Breite, Stil und outline-color auf einmal.

Die drei Schlüsselwörter entsprechen browserdefinierter Stärken statt fester Pixelwerte und können daher leicht zwischen Browsern variieren. In der Praxis ist thin ungefähr 1px, medium (der Standard) ungefähr 3px und thick ungefähr 5px. Wenn Sie einen exakten, vorhersehbaren Wert benötigen, verwenden Sie eine <length> wie 2px oder 0.2em.

Beachten Sie, dass outline-width keine Prozentangaben oder negative Werte akzeptiert.

Anfangswertmedium
Gilt fürAlle Elemente.
VererbtNein.
AnimierbarJa. Die Breite des Umrisses ist animierbar.
VersionCSS2
DOM-SyntaxObject.style.outlineWidth = "thick";

Syntax

CSS outline-width Syntax

outline-width: medium | thin | thick | length | initial | inherit | revert | unset;

Beispiel mit mehreren Werten

CSS outline-width Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .p1 {
        outline-style: solid;
        outline-width: 5px;
      }
      .p2 {
        outline-style: solid;
        outline-width: 0.4em;
      }
      .p3 {
        outline-style: solid;
        outline-width: thin;
      }
      .p4 {
        outline-style: solid;
        outline-width: medium;
      }
      .p5 {
        outline-style: solid;
        outline-width: thick;
      }
      .p6 {
        outline-style: solid;
        outline-width: 0.1cm;
      }
      .p7 {
        outline-style: solid;
        outline-width: 1mm;
      }
    </style>
  </head>
  <body>
    <h2>Outline-width property example</h2>
    <p class="p1">This is a paragraph with outline set to 5px.</p>
    <p class="p2">This is a paragraph with outline set to 0.4em.</p>
    <p class="p3">This is a paragraph with outline set to thin.</p>
    <p class="p4">This is a paragraph with outline set to medium.</p>
    <p class="p5">This is a paragraph with outline set to thick.</p>
    <p class="p6">This is a paragraph with outline set to 0.1cm.</p>
    <p class="p7">This is a paragraph with outline set to 1 mm.</p>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS outline-width Eigenschaft

Im folgenden Beispiel hat das erste Element keinen Rahmen, das zweite schon. Beachten Sie, dass der Umriss des zweiten Elements außerhalb seines Rahmens gezeichnet wird, mit einem Abstand, den Sie mit outline-offset vergrößern könnten.

Umriss mit Rahmen

CSS outline-width weiteres Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        outline-style: solid;
        outline-width: thick;
      }
      div.ex2 {
        border: 2px solid #1c87c9;
        outline-style: solid;
        outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
    <br />
    <div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>
Probier es selbst »

Einfaches Umriss-Beispiel

Beispiel der CSS outline-width Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #1c87c9;
        outline-style: dotted;
        outline-width: 3px;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>
Probier es selbst »

outline-width und outline-style kombinieren

Beispiel der CSS outline-width Eigenschaft mit der outline-style Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #1c87c9;
        outline-style: dashed;
        outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
mediumDefiniert einen mittleren Umriss. Dies ist der Standardwert dieser Eigenschaft.Ausprobieren »
thinDefiniert einen dünnen Umriss.Ausprobieren »
thickDefiniert einen dicken Umriss.Ausprobieren »
lengthDefiniert die Stärke des Umrisses.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.
revertSetzt die Eigenschaft auf den vom User-Agent oder der vorherigen Kaskade festgelegten Wert zurück.
unsetSetzt die Eigenschaft auf ihren vererbten oder Anfangswert zurück, je nach Vererbungsverhalten.

Verwandte Eigenschaften

  • outline — Kurzschreibweise für Breite, Stil und Farbe in einer Deklaration.
  • outline-style — erforderlich, damit die Breite sichtbar ist.
  • outline-color — legt die Farbe des Umrisses fest.
  • outline-offset — fügt Abstand zwischen dem Umriss und dem Rahmen des Elements hinzu.
  • border-width — das Box-Modell-Gegenstück, das tatsächlich das Layout beeinflusst.

Übung

Übung
Welche möglichen Werte gibt es für die Eigenschaft 'outline-width' in CSS?
Welche möglichen Werte gibt es für die Eigenschaft 'outline-width' in CSS?
Was this page helpful?