CSS-Eigenschaft box-shadow

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.