CSS-Box-Schatten


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS-Box-Shadow-Eigenschaft

Zur Anwendung wird die CSS-Eigenschaft box-shadow verwendet ein oder mehrere Schatten für ein Element.


Geben Sie einen horizontalen und einen vertikalen Schatten an

Im einfachsten Fall geben Sie lediglich einen horizontalen und einen vertikalen Schatten an. Die Standardfarbe des Schattens ist die aktuelle Textfarbe.

A <div> element with a box-shadow

Beispiel

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>



Geben Sie eine Farbe für den Schatten an

Der Parameter color definiert die Farbe des Schattens.

A <div> element with a lightblue box-shadow

Beispiel

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>



Fügen Sie dem Schatten einen Unschärfeeffekt hinzu

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

A <div> element with a 5px blurred, lightblue box-shadow

Beispiel

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>



Legen Sie den Ausbreitungsradius des Schattens fest

Der Parameter Spread definiert den Spreizradius. Ein positiver Wert vergrößert den Schatten, ein negativer Wert verringert ihn.

A <div> element with a blurred, lightblue box-shadow, with a spread radius of 12px

Beispiel

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>




Legen Sie den Einfügungsparameter fest

Der Parameter inset ändert den Schatten von einem äußeren Schatten (Anfang) in einen inneren Schatten.

A <div> element with a blurred, lightblue, inset box-shadow

Beispiel

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>



Fügen Sie mehrere Schatten hinzu

Ein Element kann auch mehrere Schatten haben:

Beispiel

   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>



Karten

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

1

January 1, 2021

Norway

Hardanger, Norway

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;
}

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>




CSS-Schatteneigenschaften

In der folgenden Tabelle sind die CSS-Schatteneigenschaften aufgeführt:

box-shadow

Fügt einem Element einen oder mehrere Schatten hinzu

text-shadow

Fügt einem Text einen oder mehrere Schatten hinzu