Outline und Box-Shadow
Fügen Sie mit outline und box-shadow Fokusumrandungen und Schatteneffekte um Elemente hinzu.
Outline und Box-Shadow ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Die outline-Eigenschaft
outline zeichnet eine Linie außerhalb des borders. Sie beeinflusst das Layout nicht — benachbarte Elemente werden nicht verschoben. Die Kurzschreibweise entspricht der von border: Breite, Stil, Farbe.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset verschiebt die outline vom Rand des borders weg. Positive Werte verschieben sie nach außen, negative Werte nach innen (Clipping-Effekt).
<button class="focus-demo">Keyboard-focused Button</button>
outline vs. border
Die wichtigsten Unterschiede:
- outline beeinflusst den Layoutfluss nicht
- outline kann nicht für einzelne Seiten festgelegt werden (kein outline-top)
- outline kann nicht rechteckig sein (in einigen Browsern folgt sie der Form des Fokusrahmens)
- outline befindet sich immer außerhalb des borders
:focus-visible vs. :focus
Verwenden Sie für Fokusrahmen bei Tastaturnavigation bevorzugt :focus-visible. Die outline wird nur angezeigt, wenn der Fokus über die Tastatur und nicht durch einen Mausklick erhalten wurde. So vermeiden Sie visuelle Ablenkung für Nutzende mit Maus und erhalten gleichzeitig die Barrierefreiheit.
<button class="focus-demo">Keyboard focus vs mouse click</button>
Grundlagen zu box-shadow
box-shadow fügt einem Element einen Schatteneffekt hinzu. Die Kurzschreibweise lautet: offset-x offset-y blur-radius spread-radius color.
<div class="card">Card with soft shadow</div>
Die Werte von box-shadow erklärt
Die einzelnen Werte von box-shadow:
- offset-x: horizontale Verschiebung (negativ = nach links)
- offset-y: vertikale Verschiebung (negativ = nach oben)
- blur-radius: Weichzeichnung (0 = scharf)
- spread-radius: vergrößert oder verkleinert die Schattengröße
- color: Schattenfarbe (RGBA wird empfohlen)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Innerer Box-Schatten mit inset
Fügen Sie das Schlüsselwort inset hinzu, um den Schatten innerhalb des Elements zu zeichnen und so eine gedrückte oder versenkte Darstellung zu erzeugen.
<input class="input focus-demo" type="text" value="Focused input" />
Mehrere Box-Schatten
Trennen Sie mehrere Schatten durch Kommas. Sie werden von vorne nach hinten übereinandergelegt:
<span class="badge">3</span>
box-shadow vs. filter: drop-shadow
box-shadow berücksichtigt nur die Form der Box. filter: drop-shadow() folgt der gerenderten Form einschließlich transparenter Bereiche — ideal für PNG-Symbole mit transparentem Hintergrund.
<div class="icon">★</div>
Ein Elevationssystem mit box-shadow
Material Design und ähnliche Systeme definieren mehrere Schattenstufen für die visuelle Höhe. Ordnen Sie CSS-Variablen Schattenwerten zu:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
box-shadow effizient animieren
Das Animieren von box-shadow löst in jedem Frame ein Neuzeichnen aus. Animieren Sie aus Performancegründen stattdessen die opacity eines Schatten-Pseudoelements oder verwenden Sie filter: drop-shadow(), das per Compositing verarbeitet werden kann.
Schnelltest
Welches Schlüsselwort von box-shadow zeichnet den Schatten innerhalb des Elements?
Zusammenfassung
outline wird außerhalb des borders gezeichnet, ohne das Layout zu beeinflussen — verwenden Sie es für Fokusindikatoren. box-shadow erzeugt Tiefenschatten mit Verschiebung, Weichzeichnung, Ausdehnung und Farbe. Verwenden Sie inset für innere Schatten. Mehrere Schatten können durch Kommas getrennt übereinandergelegt werden.
Häufig gestellte Fragen
Ist die Lektion „Outline und Box-Shadow“ kostenlos?
Ja — der vollständige Text von „Outline und Box-Shadow“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Outline und Box-Shadow“?
Fügen Sie mit outline und box-shadow Fokusumrandungen und Schatteneffekte um Elemente hinzu. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Outline und Box-Shadow“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Breite, Höhe, Margin und Padding verstehen
- Rahmenstile, -breite und -farbe
- Box-Sizing: Content-Box vs. Border-Box
- Outline und Box-Shadow