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