CSS Outline Width

CSS Outline Width: Die outline-width in CSS legt die Breite des Umrisses (outline) eines Elements fest. Diese Eigenschaft ist besonders nützlich, um visuell hervorzuheben, wenn ein Element fokussiert ist, ohne dabei das Layout oder die tatsächliche Größe des Elements zu beeinflussen. Die outline-Breite kann mit festen Werten oder durch vordefinierte Schlüsselwörter festgelegt werden.

Werte für outline-width

• Dünn (thin): Standardmäßige, dünne Breite.
• Mittel (medium): Etwas breiter als thin und in der Regel der Standardwert für Umrisse.
• Dick (thick): Breiter als medium und gut sichtbar.
• Feste Größen: Sie können auch benutzerdefinierte Einheiten wie px, em, rem usw. verwenden, um die Breite des Umrisses exakt zu steuern.

/* Beispiele für outline-width */
.box1 {
    outline-width: thin;       /* Dünner Umriss */
}

.box2 {
    outline-width: medium;     /* Mittlerer Umriss (Standard) */
}

.box3 {
    outline-width: thick;      /* Breiter Umriss */
}

.box4 {
    outline-width: 5px;        /* Benutzerdefinierte Breite von 5 Pixeln */
}

Beispiel: outline-width in Kombination mit anderen Outline-Eigenschaften

.button {
    outline-style: solid;
    outline-color: blue;
    outline-width: 3px; /* Breite des Umrisses auf 3 Pixel gesetzt */
}

Hinweise zur Verwendung

• Barrierefreiheit: Eine sichtbare outline-width ist nützlich, um den Fokus auf interaktive Elemente wie Schaltflächen und Eingabefelder zu verdeutlichen und die Zugänglichkeit zu verbessern.
• Unabhängig vom Layout: Im Gegensatz zu border-width beeinflusst outline-width nicht die Größe oder das Layout eines Elements. Die Outline wird außerhalb der eigentlichen Box des Elements gezeichnet.

Häufig gestellte Fragen

Zusammenfassung

outline-width ist eine CSS-Eigenschaft, die die Breite des Umrisses festlegt. Sie wird häufig verwendet, um den Fokuszustand hervorzuheben, ohne das Layout zu beeinflussen.

Übungsaufgabe

Erstellen Sie ein Eingabefeld mit einer outline-width von 4px und der Farbe Ihrer Wahl.