box-shadow

box-shadow: 10px 5px 5px red;

box-shadow: 60px -16px teal;

box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2);

box-shadow: inset 5em 1em gold;

box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <p>This is a box with a box-shadow around it.</p>
  </div>
</section>

#example-element {
  margin: 20px auto;
  padding: 0;
  border: 2px solid #333;
  width: 80%;
  text-align: center;
}

Die box-shadow Eigenschaft ermöglicht es Ihnen, einen Schlagschatten vom Rahmen fast jedes Elements zu werfen. Wenn ein border-radius auf dem Element mit einem Kastenschatten angegeben wird, übernimmt der Kastenschatten die gleichen abgerundeten Ecken. Die Z-Reihenfolge mehrerer Kastenschatten ist dieselbe wie bei mehreren Textschatten (der zuerst angegebene Schatten liegt oben).

Der Box-shadow-Generator ist ein interaktives Tool, das es Ihnen ermöglicht, einen box-shadow zu erstellen.

/* Keyword values */
box-shadow: none;

/* A color and two length values */
/* <color> | <length> | <length> */
box-shadow: red 60px -16px;

/* Three length values and a color */
/* <length> | <length> | <length> | <color> */
box-shadow: 10px 5px 5px black;

/* Four length values and a color */
/* <length> | <length> | <length> | <length> | <color> */
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

/* inset, length values, and a color */
/* <inset> | <length> | <length> | <color> */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow:
  3px 3px red inset,
  -1em 0 0.4em olive;

/* Global values */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;

Geben Sie einen einzelnen Kastenschatten an, indem Sie:

• Zwei, drei oder vier <length> Werte angeben.

  • Wenn nur zwei Werte angegeben werden, werden sie als <offset-x> und <offset-y> Werte interpretiert.
  • Wenn ein dritter Wert angegeben wird, wird dieser als <blur-radius> interpretiert.
  • Wenn ein vierter Wert angegeben wird, wird dieser als <spread-radius> interpretiert.

• Optional das inset Schlüsselwort.

• Optional einen <color> Wert.

Um mehrere Schatten anzugeben, geben Sie eine durch Kommas getrennte Liste von Schatten an.

<color> Optional

Gibt die Farbe für den Schatten an. Siehe <color> Werte für mögliche Schlüsselwörter und Notationen. Wenn nicht angegeben, wird der Wert der im übergeordneten Element definierten color Eigenschaft verwendet.

<length>

Gibt die Versatzlänge des Schattens an. Dieser Parameter akzeptiert zwei, drei oder vier Werte. Dritte und vierte Werte sind optional. Sie werden wie folgt interpretiert:

• Wenn zwei Werte angegeben werden, werden sie als <offset-x> (horizontaler Versatz) und <offset-y> (vertikaler Versatz) Werte interpretiert. Ein negativer <offset-x> Wert platziert den Schatten links vom Element. Ein negativer <offset-y> Wert platziert den Schatten über dem Element.
  Wenn nicht angegeben, wird der Wert 0 für die fehlende Länge verwendet. Wenn sowohl <offset-x> als auch <offset-y> auf 0 gesetzt sind, wird der Schatten hinter dem Element platziert (und kann einen Unschärfeeffekt erzeugen, wenn <blur-radius> und/oder <spread-radius> gesetzt ist).

• Wenn drei Werte angegeben werden, wird der dritte Wert als <blur-radius> interpretiert. Je größer dieser Wert ist, desto größer ist die Unschärfe, sodass der Schatten größer und leichter wird. Negative Werte sind nicht erlaubt. Wenn nicht angegeben, wird er auf 0 gesetzt (was bedeutet, dass die Schattenkante scharf sein wird). Die Spezifikation enthält keinen genauen Algorithmus dafür, wie der Unschärferadius berechnet werden sollte; sie erläutert jedoch wie folgt:

  …bei einer langen, geraden Schattenkante sollte dies einen Farbverlauf in der Länge des Unschärfeabstands erzeugen, der senkrecht zur Schattenkante liegt und von der vollen Schattenfarbe am Radiusendpunkt innerhalb des Schattens bis hin zu vollständig transparent am Endpunkt außerhalb reicht.

• Wenn vier Werte angegeben werden, wird der vierte Wert als <spread-radius> interpretiert. Positive Werte vergrößern und erweitern den Schatten, negative Werte verkleinern ihn. Wenn nicht angegeben, wird er auf 0 gesetzt (das heißt, der Schatten wird die gleiche Größe wie das Element haben).

inset Optional

Ändert den Schatten von einem äußeren Kastenschatten zu einem inneren Kastenschatten (als ob der Inhalt in die Box gedrückt wird). Eingesetzte Schatten werden innerhalb des Rahmens der Box gezeichnet (auch wenn der Rahmen transparent ist) und erscheinen über dem Hintergrund, aber unter dem Inhalt. Standardmäßig verhält sich der Schatten wie ein Schlagschatten, der den Eindruck erweckt, dass die Box über ihrem Inhalt schwebt. Dies ist das Standardverhalten, wenn inset nicht angegeben ist.

Wenn Schatten animiert werden, wie wenn mehrere Schattenwerte auf einer Box sich bei Hover-Effekten zu neuen Werten ändern, werden die Werte interpoliert. Interpolation bestimmt Zwischenwerte von Eigenschaften, wie Unschärferadius, Ausbreitungsradius und Farbe, wenn Schatten übergehen. Für jeden Schatten in einer Liste von Schatten gehen die Farbe, x, y, Unschärfe und Ausbreitung über; die Farbe als <color>, und die anderen Werte als <length>s.

Bei der Interpolation mehrerer Schatten zwischen zwei durch Kommas getrennten Listen von mehreren Kastenschatten werden die Schatten paarweise angeordnet, wobei die Interpolation zwischen gepaarten Schatten erfolgt. Wenn die Listen von Schatten unterschiedliche Längen haben, wird die kürzere Liste am Ende mit Schatten ausgefüllt, deren Farbe transparent ist, und X, Y und Unschärfe sind 0, wobei der Einsatz, oder das Fehlen von Einsatz, aufeinander abgestimmt ist. Wenn in einem Schattenpaar einer inset gesetzt hat und der andere nicht, bleibt die gesamte Schattenliste uninterpoliert; die Schatten ändern ihre Werte ohne einen animierenden Effekt.

box-shadow = 
  <spread-shadow>#  

<spread-shadow> = 
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?                            

<box-shadow-color> = 
  <color>#  

<box-shadow-offset> = 
  [ none | <length>{2} ]#  

<box-shadow-blur> = 
  <length [0,∞]>#  

<box-shadow-spread> = 
  <length>#  

<box-shadow-position> = 
  [ outset | inset ]#  

In diesem Beispiel fügen wir drei Schatten hinzu: einen eingesetzten Schatten, einen regulären Schlagschatten und einen 2px Schatten, der einen Rahmen-Effekt erzeugt (wir hätten auch ein outline dafür nutzen können).

HTML

<blockquote>
  <q>
    You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.
  </q>
  <p>&mdash; Maya Angelou</p>
</blockquote>

CSS

blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgb(0 200 0 / 30%),
    0 0 0 2px white,
    0.3em 0.3em 1em rgb(200 0 0 / 60%);
}

Ergebnis

Wenn x-offset, y-offset und Unscharfe alle null sind, wird der Kastenschatten ein einfarbiger Umriss gleicher Größe auf allen Seiten sein. Die Schatten werden von vorne nach hinten gezeichnet, sodass der erste Schatten oben auf den nachfolgenden Schatten liegt. Wenn der border-radius auf 0 gesetzt ist, wie es standardmäßig der Fall ist, werden die Ecken des Schattens, na ja, Ecken sein. Hätten wir einen border-radius von einem anderen Wert eingesetzt, wären die Ecken abgerundet.

Wir haben einen Rand in der Größe des breitesten Kastenschattens hinzugefügt, um sicherzustellen, dass der Schatten keine angrenzenden Elemente überlappt oder über den Rahmen der beinhaltenden Box hinausragt. Ein Kastenschatten hat keinen Einfluss auf Box-Modell-Dimensionen.

HTML

<div><p>Hello World</p></div>

CSS

p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}

Ergebnis

• Der <color> Datentyp (zur Angabe der Schattenfarbe)
• text-shadow
• drop-shadow()
• Farbe auf HTML-Elemente mit CSS anwenden