drop-shadow()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Die drop-shadow() CSS Funktion wendet einen Schlagschatteneffekt auf das Eingabebild an. Das Ergebnis ist eine <filter-function>.

Probieren Sie es aus

Ein Schlagschatten ist im Wesentlichen eine verschwommene, versetzte Version der Alphamaske des Eingabebildes, die in einer bestimmten Farbe gezeichnet und unter dem Bild zusammengesetzt wird.

Hinweis: Diese Funktion ist der box-shadow-Eigenschaft etwas ähnlich. Die box-shadow-Eigenschaft erzeugt einen rechteckigen Schatten hinter dem gesamten Rahmen eines Elements, während die drop-shadow()-Filterfunktion einen Schatten erzeugt, der sich an die Form (Alphakanal) des Bildes selbst anpasst.

Syntax

css
/* Two length values */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)

/* Three length values */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)

/* Two length values and a color */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)

/* Three length values and a color */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)

/* The order of color and length values can be changed */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#e23 0.5rem 0.5rem 1rem)

Die drop-shadow()-Funktion akzeptiert einen Parameter vom Typ <shadow> (definiert in der box-shadow-Eigenschaft), mit der Ausnahme, dass das inset-Schlüsselwort und die spread-Parameter nicht erlaubt sind.

Parameter

<color> Optional

Gibt die Farbe des Schattens an. Wenn nicht angegeben, wird der Wert der color-Eigenschaft, die im Elternelement definiert ist, verwendet.

<length>

Gibt die Versatzlänge des Schattens an. Dieser Parameter akzeptiert zwei oder drei Werte. Wenn zwei Werte angegeben sind, werden sie als <offset-x> (horizontaler Versatz) und <offset-y> (vertikaler Versatz) 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 für die fehlende Länge der Wert 0 verwendet. Wenn ein dritter Wert angegeben ist, wird er als <standard-deviation> interpretiert, der den Wert der Standardabweichung für die Gaussian blur-Funktion darstellt. Ein größerer <standard-deviation>-Wert erzeugt einen größeren und verschwommeneren Schatten. Negative Werte für <standard-deviation> sind nicht erlaubt.

Formale Syntax

<drop-shadow()> = 
drop-shadow( [ <color>? && <length>{2,3} ] )

Beispiele

Einen Schlagschatten festlegen

html
<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
css
div {
  display: inline-block;
  margin: 0 0.5rem 2rem 1rem;
  padding: 0.5rem;
  height: 100px;
  width: 190px;
  vertical-align: top;
  background-color: #222;

  color: lime;
}

div:nth-child(1) {
  filter: drop-shadow(16px 16px);
}

div:nth-child(2) {
  filter: drop-shadow(16px 16px red);
}

div:nth-child(3) {
  filter: drop-shadow(red 1rem 1rem 10px);
}

div:nth-child(4) {
  filter: drop-shadow(-16px -16px red);
}

In Ermangelung eines <color>-Wertes in der drop-shadow()-Funktion im ersten Kasten verwendet der Schatten den Wert der color-Eigenschaft des Elements (lime). Die zweiten und dritten Schatten zeigen, dass die Längen- und Farbwerte in beliebiger Reihenfolge angegeben werden können. Der dritte Schatten zeigt den Verwischungseffekt, wenn ein dritter <length>-Wert angegeben wird. Der vierte Schatten verwendet negative Versätze, die den Schatten nach links und oben verschieben.

Spezifikationen

Specification
Filter Effects Module Level 1
# funcdef-filter-drop-shadow

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Die anderen <filter-function>-Funktionen, die in den Werten der filter- und backdrop-filter-Eigenschaften verwendet werden können, umfassen: