box-shadow

Probieren Sie es aus

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

box-shadow: 60px -16px teal;

box-shadow: 12px 12px 2px 1px rgb(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 #333333;
  width: 80%;
  text-align: center;
}

Die box-shadow Eigenschaft ermöglicht es Ihnen, einen Schlagschatten aus dem Rahmen fast jedes Elements zu werfen. Wenn ein border-radius auf das Element mit einem Box-Schatten angewendet wird, übernimmt der Box-Schatten dieselben abgerundeten Ecken. Die Z-Reihenfolge von mehreren Box-Schatten 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 generieren.

Syntax

/* 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;

Einzelnen Box-Schatten angeben mit:

• Zwei, drei oder vier <length> Werten.

  • 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, ein <color> Wert.

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

Werte

<color> Optional

Gibt die Farbe des Schattens an. Siehe <color> Werte für mögliche Schlüsselwörter und Notationen. Wenn nicht angegeben, wird der Wert der color Eigenschaft des übergeordneten Elements 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 sind).

• Wenn drei Werte angegeben werden, wird der dritte Wert als <blur-radius> interpretiert. Je größer dieser Wert, desto größer die Unschärfe, und der Schatten wird größer und heller. Negative Werte sind nicht erlaubt. Wenn nicht angegeben, wird er auf 0 gesetzt (was bedeutet, dass die Kante des Schattens scharf sein wird). Die Spezifikation enthält keinen exakten Algorithmus zur Berechnung des Unschärferadius; sie erläutert jedoch:

  …für eine lange, gerade Schattenkante sollte dies einen Farbverlauf über die Länge der Unschärfedistanz erzeugen, die senkrecht zur Schattenkante und darauf zentriert ist, und der Farbverlauf reicht vom vollständigen Schatten am Radius-Endpunkt innerhalb des Schattens bis zur vollständigen Transparenz am Endpunkt außerhalb.

• Wenn vier Werte angegeben werden, wird der vierte Wert als <spread-radius> interpretiert. Positive Werte bewirken, dass der Schatten sich ausdehnt und größer wird, negative Werte bewirken, dass der Schatten schrumpft. Wenn nicht angegeben, wird er auf 0 gesetzt (das bedeutet, der Schatten hat die gleiche Größe wie das Element).

inset Optional

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

Interpolation

Beim Animieren von Schatten, zum Beispiel wenn mehrere Schattenwerte auf einer Box auf neue Werte beim Hover übergehen, werden die Werte interpoliert. Interpolation bestimmt Zwischenwerte von Eigenschaften wie Unschärferadius, Ausbreitungsradius und Farbe, während Schatten übergehen. Für jeden Schatten in einer Liste von Schatten changiert die Farbe, x, y, Unschärfe und Ausbreitung; die Farbe als <color> und die anderen Werte als <length>s.

Beim Interpolieren mehrerer Schatten zwischen zwei durch Kommas getrennten Listen von mehreren Box-Schatten werden die Schatten paarweise zugeordnet, wobei die Interpolation zwischen gepaarten Schatten erfolgt. Wenn die Listen von Schatten unterschiedliche Längen haben, dann wird die kürzere Liste am Ende mit Schatten aufgefüllt, deren Farbe transparent ist, und deren X, Y und Unschärfe 0 sind, wobei das inset oder dessen Fehlen übereinstimmt. Wenn in einem Schattenpaar einer inset gesetzt hat und der andere nicht, wird die gesamte Schattenliste nicht interpoliert; die Schatten ändern sich direkt zu den neuen Werten ohne einen Animationseffekt.

Formale Definition

Formale Syntax

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 ]#  

Beispiele

Drei Schatten setzen

In diesem Beispiel fügen wir drei Schatten ein: einen eingesetzten Schatten, einen regulären Schlagschatten und einen 2px Schatten, der einen Randeffekt erzeugt (wir hätten stattdessen ein outline für diesen dritten Schatten verwenden 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

Null für Versatz und Unschärfe setzen

Wenn der x-offset, y-offset und die blur alle Null sind, wird der Box-Schatten eine solide, farbige Umrandung in gleicher Größe auf allen Seiten sein. Die Schatten werden von vorne nach hinten gezeichnet, sodass der erste Schatten über den folgenden 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 gewesen.

Wir haben eine Marge in der Größe des breitesten Box-Schatten hinzugefügt, um sicherzustellen, dass der Schatten nicht benachbarte Elemente überlappt oder über den Rand der umgebenden Box hinausgeht. Ein Box-Schatten wirkt sich nicht auf die Box-Modell Dimensionen aus.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <color>
• text-shadow
• drop-shadow()
• Einführung in Textschatten
• Anwenden von Farbe auf HTML-Elemente mit CSS
• CSS Hintergründe und Rahmen Modul