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

Mit der box-shadow Eigenschaft können Sie einen Schlagschatten vom Rahmen fast jedes Elements werfen. Wenn ein border-radius auf dem Element mit einem Box-Schatten angegeben ist, übernimmt der Box-Schatten die gleichen abgerundeten Ecken. Die Z-Anordnung mehrerer Box-Schatten ist dieselbe wie bei mehreren Textschatten (der zuerst angegebene Schatten liegt oben).

Der Box-Schatten Generator ist ein interaktives Werkzeug, mit dem Sie einen box-shadow generieren können.

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

Spezifizieren Sie einen einzelnen Box-Schatten 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 er als <blur-radius> interpretiert.
  • Wenn ein vierter Wert angegeben wird, wird er als <spread-radius> interpretiert.

• Optional das Schlüsselwort inset.

• Optional ein <color> Wert.

Um mehrere Schatten anzugeben, geben Sie eine kommagetrennte Liste von Schatten an.

<color> Optional

Bestimmt die Farbe für den Schatten. 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>

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

• Wenn zwei Werte angegeben sind, 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 sind, wird der dritte Wert als <blur-radius> interpretiert. Je größer dieser Wert ist, desto größer wird die Unschärfe, sodass der Schatten größer und heller wird. Negative Werte sind nicht erlaubt. Wenn nicht angegeben, wird er auf 0 gesetzt (was bedeutet, dass die Schattenkante scharf bleibt). Die Spezifikation enthält keinen genauen Algorithmus dafür, wie der Unschärferadius berechnet werden soll; jedoch wird beschrieben, wie folgt:

  …für eine lange, gerade Schattenkante sollte dies einen Farbverlauf in der Länge des Unschärfeabstands erzeugen, der senkrecht zur und zentriert auf der Schattenkante ist und der von der vollen Schattenfarbe am Radiusendpunkt innerhalb des Schattens bis hin zu vollständig transparent am Endpunkt außerhalb des Schattens reicht.

• Wenn vier Werte angegeben sind, wird der vierte Wert als <spread-radius> interpretiert. Positive Werte führen dazu, dass der Schatten sich ausdehnt und größer wird, negative Werte führen dazu, dass der Schatten schrumpft. Wenn nicht angegeben, wird er auf 0 gesetzt (das heißt, der Schatten wird dieselbe Größe wie das Element haben).

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). Eingelassene 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 und vermittelt den Eindruck, dass die Box über ihrem Inhalt schwebt. Dies ist das Standardverhalten, wenn inset nicht angegeben wird.

Beim Animieren von Schatten, wie wenn mehrere Schattenwerte auf eine Box beim Hover zu neuen Werten wechseln, werden die Werte interpoliert. Interpolation bestimmt Zwischenwerte von Eigenschaften, wie den Unschärferadius, Verbreitungsradius und die Farbe, während die Schatten übergehen. Für jeden Schatten in einer Liste von Schatten gehen Farbe, x, y, Unschärfe und Verbreitung über; die Farbe als <color> und die anderen Werte als <length>s.

Bei der Interpolation mehrerer Schatten zwischen zwei kommaseparierten Listen von mehreren Box-Schatten werden die Schatten in der Reihenfolge gepaart, und die Interpolation erfolgt zwischen gepaarten Schatten. Wenn die Schattenlisten unterschiedliche Längen haben, wird die kürzere Liste am Ende mit Schatten aufgefüllt, deren Farbe transparent ist, während X, Y und Unschärfe 0 sind, wobei inset oder das Fehlen von inset so eingestellt ist, dass es passt. Wenn in einem Paar von Schatten einer inset gesetzt hat und der andere nicht, wird die gesamte Schattenliste nicht interpoliert; die Schatten ändern sich zu den neuen Werten 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 beinhalten wir drei Schatten: einen eingelassenen Schatten, einen normalen Schlagschatten und einen 2px-Schatten, der einen Rahmeneffekt 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

Wenn der x-offset, y-offset und blur alle null sind, wird der Box-Schatten eine einfarbige Outline 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 der Standard ist, werden die Ecken des Schattens entsprechend Ecken sein. Hätten wir einen border-radius von einem anderen Wert angegeben, wären die Ecken abgerundet.

Wir fügen eine Marge in der Größe des breitesten Box-Schatten hinzu, um sicherzustellen, dass der Schatten nicht mit benachbarten Elementen überlappt oder über die Grenze 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

• Der <color> Datentyp (zum Festlegen der Schattenfarbe)
• text-shadow
• drop-shadow()
• Anwenden von Farbe auf HTML-Elemente mit CSS