CSS-Eigenschaft box-shadow

Die Eigenschaft box-shadow ermöglicht es, mehrere Schatten um die Box herum zu platzieren, wobei Werte für Farbe, Größe, Unschärfe, Offset und Inset angegeben werden. Man kann Effekte, die durch Kommas getrennt sind, hinzufügen.

Wenn auf dem Element mit einem box shadow ein border-radius angegeben ist, nimmt der Rahmenschatten die gleichen abgerundeten Ecken an.

Dies zwei Werte stellen den Schatten-Offset ein. H-Offset gibt den horizontalen Abstand an. Positive Werte geben Schatten auf der rechten Seite des Elements. Negative Werte stellen den Schatten links vom Element dar. V-Offset gibt den vertikalen Abstand an. Positiver Wert gibt Schatten unter dem Element. Bei negativen Werten wird der Schatten über dem Element platziert. Wenn beide Werte 0 sind, wird der Schatten hinter dem Element platziert.

Der dritte Wert ist Blur. Je höher die Zahl, desto größer die Unschärfe, so dass der Schatten immer größer und heller wird. Negative Werte sind nicht erlaubt. Wenn der Wert 0 ist, ist der Rand des Schattens scharf.

Der vierte Wert ist inset. Es fügt dem Element inneren Schatten hinzu. Wenn es voreingestellt ist, wird der Schatten als Schlagschatten angenommen.

Der fünfte Wert ist spread. Positive Werte bewirken, dass sich der Schatten ausdehnt, negative Werte bewirken, dass der Schatten schrumpft. Wenn der Wert 0 ist, hat der Schatten die gleiche Größe wie das Element.

Der sechste Wert ist color. Es fügt dem Schatten Farben hinzu. Wenn dieser Wert 0 ist, hängt die verwendete Farbe vom Browser ab.

Bei der Verwendung der Eigenschaft box-shadow muss man die Präfixe -moz- und -webkit- für Mozilla und Webkit verwenden.
Anfangswert none
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja. Der Schatten der Box ist animierbar.
Version CSS3
DOM Syntax object.style.boxShadow = "15px 25px 35px gray";

Syntax

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

In diesem Beispiel versuchen wir, einem Element Schatten hinzuzufügen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: 5px 4px 10px #1c87c9;
      -moz-box-shadow: 5px 4px 10px #1c87c9;
      -webkit-box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für Box-shadow</h2>
    <div></div>
  </body>
</html>

In diesem Beispiel fügen wir mehrere Schatten zu einer Box hinzu.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 50%;
      height: 100px;
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Mehrere Schatten für box-shadow.</h2>
    <div></div>
  </body>
</html>

In diesem Beispiel geben wir dem Element nun einen Inset-Wert. Es fügt Schatten in die Box ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -moz-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -webkit-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow mit dem Wert inset</h2>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
none Kein Schatten.
h-offset Erforderlich. Der horizontale Offset des Schattens. Ein positiver Wert gibt den Schatten auf der rechten Seite der Box an, ein negativer Wert gibt den Schatten auf der linken Seite der Box an.
v-offset Erforderlich. Der vertikale Offset des Schattens. Ein positiver Wert gibt den Schatten unter der Box an, ein negativer Wert gibt den Schatten über der Box an.
blur Optional. Der Schatten ist verschwommen. Je höher die Zahl, desto unschärfer wird der Schatten sein.
spread Optional. Der Schatten wird verteilt. Ein positiver Wert erhöht die Größe des Schattens, ein negativer Wert verringert die Größe des Schattens.
inset Optional. Umwandlung des Outsets (äußerer Schatten) in einen Inset (innerer Schatten).
color Optional. Die Farbe des Schattens.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
4.0+ 12.0+ 3.5+ 5.0+ 11.5+

Übe dein Wissen

Was ist der Zweck der CSS-Eigenschaft box-shadow?
Finden Sie das nützlich?