CSS box-shadow-Eigenschaft
Die Eigenschaft box-shadow ermöglicht es Ihnen, mehrere Schatten um ein Element hinzuzufügen, indem Sie Werte für horizontalen Versatz, vertikalen Versatz, Unschärferadius, Ausbreitungsradius, Farbe und das Schlüsselwort inset angeben.
Die Eigenschaft box-shadow ist eine der CSS3-Eigenschaften.
Sie können durch Kommas getrennte Effekte hinzufügen. Wenn Sie für das Element mit einem Schatten eine border-radius angeben, übernimmt der Schatten dieselben abgerundeten Ecken.
Dies sind zwei Werte, die den Schattenversatz festlegen. H-offset gibt den horizontalen Abstand an. Positive Werte platzieren den Schatten rechts vom Element. Negative Werte platzieren ihn links. V-offset gibt den vertikalen Abstand an. Ein positiver Wert platziert den Schatten unter dem Element, während ein negativer Wert ihn darüber platziert. Wenn beide Werte 0 sind, erscheint der Schatten direkt hinter dem Element.
Der dritte Wert ist der Unschärferadius. Er ist optional. Je höher die Zahl, desto größer und heller wird die Unschärfe. Negative Werte sind ungültig. Wenn er weggelassen oder auf 0 gesetzt wird, ist der Rand des Schattens scharf.
Der vierte Wert ist der Ausbreitungsradius. Er ist optional. Positive Werte bewirken, dass sich der Schatten ausdehnt, negative Werte lassen ihn schrumpfen. Wenn er weggelassen oder auf 0 gesetzt wird, hat der Schatten dieselbe Größe wie das Element.
Der fünfte Wert ist die Farbe. Er ist optional. Wenn er weggelassen wird, verwendet der Schatten standardmäßig die berechnete Textfarbe des Elements.
Der sechste Wert ist das Schlüsselwort inset. Es ist optional und kann an beliebiger Stelle in der Schatten-Definition platziert werden. Wenn es vorhanden ist, erzeugt es statt eines Schlagschattens einen inneren Schatten.
| Initial Value | none |
|---|---|
| Applies to | Alle Elemente. Es gilt auch für ::first-letter. |
| Inherited | No. |
| Animatable | Yes. The shadow of the box is animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.boxShadow = "15px 25px 35px gray"; |
Syntax
Syntax der CSS-Eigenschaft box-shadow
box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;Lassen Sie uns versuchen, einem Element Schatten hinzuzufügen.
Beispiel für die Eigenschaft box-shadow:
Beispiel der CSS-Eigenschaft box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: 5px 4px 10px #1c87c9;
}
</style>
</head>
<body>
<h2>Box-shadow-Beispiel</h2>
<div></div>
</body>
</html>Ergebnis
Mehrere Schatten
Sie haben die Möglichkeit, box-shadow mehrmals durch Kommas zu trennen. Das folgende Beispiel zeigt beispielsweise 3 Schatten mit mehreren Farben und Positionen auf demselben Element.
Beispiel für die Verwendung der Eigenschaft box-shadow, um dem Element mehrere Schatten hinzuzufügen:
Beispiel der CSS-Eigenschaft box-shadow mit mehreren Werten
<!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 mit box-shadow.</h2>
<div></div>
</body>
</html>Ergebnis
Nun geben wir dem Element einen inset-Wert. Er fügt dem Kasten einen inneren Schatten hinzu.
Beispiel für die Eigenschaft box-shadow mit dem Wert "inset":
Beispiel der CSS-Eigenschaft box-shadow mit dem Wert inset
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
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>Ergebnis
Einseitiger Schatten
Um einen Schatten zu erzeugen, der nur auf einer Seite eines Kastens erscheint, verwenden Sie einen negativen Wert für den Ausbreitungsradius.
CSS-Eigenschaft box-shadow
.shadow {
box-shadow: 0 10px 8px -4px yellow;
}Beispiel für die Eigenschaft box-shadow mit einem negativen Wert für den Ausbreitungsradius:
Beispiel für die Eigenschaft box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
.shadow {
width: 100px;
height: 100px;
box-shadow: 0 10px 8px -4px yellow;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>Werte
| Value | Description | Play it |
|---|---|---|
| none | Kein Schatten wird angegeben. | Play it » |
| h-offset | Erforderlich. Der horizontale Versatz des Schattens. Ein positiver Wert gibt den Schatten auf der rechten Seite des Kastens an, ein negativer Wert auf der linken Seite des Kastens. | Play it » |
| v-offset | Erforderlich. Der vertikale Versatz des Schattens. Ein positiver Wert gibt den Schatten unterhalb des Kastens an, ein negativer Wert oberhalb des Kastens. | Play it » |
| blur-radius | Optional. Der Schatten wird unscharf. Je höher die Zahl, desto unschärfer wird der Schatten. Negative Werte sind ungültig. | Play it » |
| spread-radius | Optional. Der Schatten wird ausgebreitet. Ein positiver Wert vergrößert den Schatten, ein negativer Wert verkleinert den Schatten. | Play it » |
| color | Optional. Die Farbe des Schattens. Wenn sie weggelassen wird, ist standardmäßig die Textfarbe des Elements. | Play it » |
| inset | Optional. Ein optionales Schlüsselwort, das an beliebiger Stelle in der Schatten-Definition platziert werden kann. Es verwandelt einen äußeren Schatten in einen inneren Schatten. | Play it » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What properties can be adjusted when defining a box-shadow in CSS?