Zur Anwendung wird die CSS-Eigenschaft box-shadow
verwendet ein oder mehrere Schatten für ein Element.
Im einfachsten Fall geben Sie lediglich einen horizontalen und einen vertikalen Schatten an. Die Standardfarbe des Schattens ist die aktuelle Textfarbe.
Geben Sie einen horizontalen und einen vertikalen Schatten an:
div
{
box-shadow: 10px 10px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>
Der Parameter color
definiert die Farbe des Schattens.
Geben Sie eine Farbe für den Schatten an:
div
{
box-shadow: 10px 10px lightblue;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a lightblue box-shadow</div>
</body>
</html>
Der Parameter blur
definiert den Unschärferadius. Je höher die Zahl, desto unschärfer wird der Schatten.
Fügen Sie dem Schatten einen Unschärfeeffekt hinzu:
div
{
box-shadow: 10px 10px 5px lightblue;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a 5px blurred, lightblue box-shadow.</div>
</body>
</html>
Der Parameter Spread
definiert den Spreizradius. Ein positiver Wert vergrößert den Schatten, ein negativer Wert verringert ihn.
Legen Sie den Ausbreitungsradius des Schattens fest:
div
{
box-shadow: 10px 10px 5px 12px lightblue;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px.</div>
</body>
</html>
Der Parameter inset
ändert den Schatten von einem äußeren Schatten (Anfang) in einen inneren Schatten.
Fügen Sie den Inset-Parameter hinzu:
div
{
box-shadow: 10px 10px 5px lightblue inset;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a blurred, lightblue, inset box-shadow.</div>
</body>
</html>
Ein Element kann auch mehrere Schatten haben:
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
margin: 20px;
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
<div id="example1">
<h2>Multiple shadows</h2>
<p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>
<div id="example2">
<h2>Multiple shadows with blur effect</h2>
<p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>
</body>
</html>
Sie können auch die Eigenschaft box-shadow
verwenden, um papierähnliche Karten zu erstellen:
January 1, 2021
Hardanger, Norway
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;
}
Probieren Sie es aus (Textkarte) →
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h1>Create Cards</h1>
<p>The box-shadow property can be used to create paper-like cards:</p>
<div class="card">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2021</p>
</div>
</div>
</body>
</html>
Probieren Sie es aus (Bildkarte) →
<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
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;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h1>Create Polaroid Images</h1>
<p>The box-shadow property can be used to create polaroid images:</p>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Hardanger, Norway</p>
</div>
</div>
</body>
</html>
In der folgenden Tabelle sind die CSS-Schatteneigenschaften aufgeführt:
Fügt einem Element einen oder mehrere Schatten hinzu
Fügt einem Text einen oder mehrere Schatten hinzu