HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben
Colors RGB HEX HSL
CSS-Hintergründe
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS-Grenzen
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS-Ränder
Margins Margin Collapse
CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-Text
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-Schriftarten
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-Icons CSS-Links CSS-Listen CSS-Tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float
Float Clear Float Examples
CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste
Navbar Vertical Navbar Horizontal Navbar
CSS-Dropdowns CSS-Bildergalerie CSS-Bild-Sprites CSS-Attribut-Selektoren CSS-Formulare CSS-Zähler CSS-Website-Layout CSS-Einheiten CSS-Spezifität CSS !wichtig CSS-Mathematikfunktionen

CSS-Erweitert

Abgerundete CSS-Ecken CSS-Randbilder CSS-Hintergründe CSS-Farben CSS-Farbschlüsselwörter CSS-Verläufe
Linear Gradients Radial Gradients Conic Gradients
CSS-Schatten
Schatteneffekte Box Schatten
CSS-Texteffekte CSS-Webfonts CSS-2D-Transformationen CSS-3D-Transformationen CSS-Übergänge CSS-Animationen CSS-Tooltips Bilder im CSS-Stil CSS-Bildreflexion CSS-Objektanpassung CSS-Objektposition CSS-Maskierung CSS-Schaltflächen CSS-Paginierung CSS mehrere Spalten CSS-Benutzeroberfläche CSS-Variablen
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS- responsiv

RWD-Einführung RWD-Ansichtsfenster RWD-Rasteransicht RWD-Medienabfragen RWD-Bilder RWD-Videos RWD-Frameworks RWD-Vorlagen

CSS -Raster

Grid-Einführung Grid-Container Rasterelement

CSS -SASS

SASS-Tutorial

CSS- Beispiele

CSS-Vorlagen CSS-Beispiele CSS-Quiz CSS-Übungen CSS-Zertifikat

CSS- Referenzen

CSS-Referenz CSS-Selektoren CSS-Funktionen CSS-Referenz Aural CSS-websichere Schriftarten CSS animierbar CSS-Einheiten CSS PX-EM-Konverter CSS-Farben CSS-Farbwerte CSS-Standardwerte CSS-Browser-Unterstützung

CSS- Box-Schatten

❮ Vorherige Nächste ❯

CSS box-shadow-Eigenschaft

Die CSS box-shadow-Eigenschaft wird verwendet, um einen oder mehrere Schatten auf ein Element anzuwenden.

Geben Sie einen horizontalen und einen vertikalen Schatten an

In seiner einfachsten Verwendung geben Sie nur einen horizontalen und einen vertikalen Schatten an. Die Standardfarbe des Schattens ist die aktuelle Textfarbe.

Ein <div>-Element mit einem Kastenschatten

Beispiel

Legen Sie einen horizontalen und einen vertikalen Schatten fest:

div {
  box-shadow: 10px 10px;
}

Geben Sie eine Farbe für den Schatten an

Der colorParameter definiert die Farbe des Schattens.

Ein <div>-Element mit einem grauen Kastenschatten

Beispiel

Geben Sie eine Farbe für den Schatten an:

div {
  box-shadow: 10px 10px grey;
}

Fügen Sie dem Schatten einen Unschärfeeffekt hinzu

Der blurParameter definiert den Unschärferadius. Je höher die Zahl, desto unschärfer wird der Schatten.

Ein <div>-Element mit einem verschwommenen, grauen Kastenschatten von 5 Pixeln

Beispiel

Fügen Sie dem Schatten einen Unschärfeeffekt hinzu:

div {
  box-shadow: 10px 10px 5px grey;
}

Stellen Sie den Ausbreitungsradius des Schattens ein

Der spreadParameter definiert den Spreizradius. Ein positiver Wert erhöht die Größe des Schattens, ein negativer Wert verringert die Größe des Schattens.

Ein <div>-Element mit einem verschwommenen, grauen Kastenschatten mit einem Ausbreitungsradius von 12 Pixel

Beispiel

Legen Sie den Ausbreitungsradius des Schattens fest:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Legen Sie den Einfügungsparameter fest

Der insetParameter ändert den Schatten von einem äußeren Schatten (Anfang) zu einem inneren Schatten.

Ein <div>-Element mit einem verschwommenen, grauen, eingefügten Schatten

Beispiel

Fügen Sie den Inset-Parameter hinzu:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Mehrere Schatten hinzufügen

Ein Element kann auch mehrere Schatten haben:

Beispiel

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Karten

Sie können die box-shadowEigenschaft auch verwenden, um papierähnliche Karten zu erstellen:

1

1. Januar 2021

Norwegen

Hardanger, Norwegen

Beispiel

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Testen Sie sich mit Übungen

Übung:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯