drop-shadow()

filter: drop-shadow(30px 10px 4px #4444dd);

filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));

filter: drop-shadow(0 0 0.75rem crimson);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Ein Drop-Shadow ist im Wesentlichen eine verwischte, versetzte Version der Alpha-Maske des Eingangsbildes, die in einer bestimmten Farbe gezeichnet und unter dem Bild zusammengesetzt wird.

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

/* Pass multiple drop-shadows to a filter to stack them */
drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)

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

<color> Optional

Gibt die Farbe für den Schatten an. Wird keine Farbe angegeben, wird der Wert der color-Eigenschaft des übergeordneten Elements 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 von dem Element. Ein negativer <offset-y>-Wert platziert den Schatten oberhalb des Elements. Wird keine Länge angegeben, wird für die fehlende Länge der Wert 0 verwendet. Wenn ein dritter Wert angegeben ist, wird er als <standard-deviation> interpretiert, was der Wert der Standardabweichung für die Gaussian blur Funktion ist. Ein größerer <standard-deviation>-Wert erzeugt einen größeren und stärker verwischten Schatten. Negative Werte für <standard-deviation> sind nicht erlaubt.

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

<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>
<div>
  drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red)
  drop-shadow(-1px -1px red)
</div>

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

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

In der Abwesenheit eines <color>-Werts in der drop-shadow()-Funktion im ersten Kasten verwendet der Schatten den Wert der color-Eigenschaft des Elements (lime). Die zweite und dritte Schatten veranschaulichen, dass die Längen- und Farbwerte in beliebiger Reihenfolge angegeben werden können. Der dritte Schatten zeigt den Weichzeichnereffekt, wenn ein dritter <length>-Wert angegeben wird. Der vierte Schatten verwendet negative Versätze, die den Schatten nach links und oben verschieben. Das fünfte Beispiel zeigt, wie mehrere Drop-Shadows auf einem einzelnen Element verwendet werden können.

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

• blur()
• brightness()
• contrast()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• box-shadow-Eigenschaft
• text-shadow-Eigenschaft