drop-shadow() CSS-Funktion
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.
Die drop-shadow()-CSS-Funktion wendet einen Schlagschatteneffekt auf das Eingabebild an. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.
Probieren Sie es aus
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 Schlagschatten ist im Wesentlichen eine weichgezeichnete, versetzte Version der Alphamaske des Eingabebildes, die in einer bestimmten Farbe gezeichnet und unter dem Bild zusammengesetzt wird.
Hinweis:
Diese Funktion ähnelt der Eigenschaft box-shadow. Die Eigenschaft box-shadow erzeugt einen rechteckigen Schatten hinter der gesamten Box eines Elements, während die Filterfunktion drop-shadow() einen Schatten erzeugt, der der Form (dem Alphakanal) des Bildes selbst folgt.
Syntax
/* 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(#ee2233 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)
Parameter
Die Funktion drop-shadow() akzeptiert zwei oder drei <length>-Werte und optional einen <color>-Wert, jeweils durch Leerzeichen getrennt.
<color>Optional-
Gibt die Farbe des Schattens an. Wenn kein Wert angegeben wird, wird der Wert der für das Element definierten Eigenschaft
colorverwendet. <length>-
Gibt die Versatzlänge des Schattens an. Dieser Parameter akzeptiert zwei oder drei Werte. Werden zwei Werte angegeben, 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 oberhalb des Elements. Wird ein dritter Wert angegeben, wird er als<standard-deviation>interpretiert, also als Wert der Standardabweichung für die Funktion zur gaußschen Weichzeichnung. Ein größerer<standard-deviation>-Wert erzeugt einen größeren und stärker weichgezeichneten Schatten. Negative Werte für<standard-deviation>sind nicht zulässig.
Rückgabewert
Ein <filter-function>-Wert.
Formale Syntax
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
Beispiele
Einen Schlagschatten festlegen
<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: #222222;
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);
}
Da in der Funktion drop-shadow() für die erste Box kein <color>-Wert angegeben ist, verwendet der Schatten den Wert der Eigenschaft color des Elements (lime). Der zweite und der dritte Schatten zeigen, dass Längen- und Farbwerte in beliebiger Reihenfolge angegeben werden können. Der dritte Schatten zeigt den Weichzeichnungseffekt, der entsteht, wenn ein dritter <length>-Wert angegeben wird. Der vierte Schatten verwendet negative Versatzwerte, die den Schatten nach links und oben verschieben. Das fünfte Beispiel zeigt, wie Sie mehrere Schlagschatten auf ein einzelnes Element anwenden können.
Den SVG-Filter verwenden
Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit angewendeter drop-shadow()-Filterfunktion, ein Bild mit dem entsprechenden SVG-Filter und das Originalbild.
SVG
Mit dem SVG-Filterelement <feDropShadow> lässt sich ebenfalls ein Schlagschatten auf Inhalte anwenden. Wir legen die Versatzwerte dx und dy, stdDeviation sowie flood-color fest. Anschließend können wir über die ID des <filter> auf den SVG-Effekt verweisen:
<svg height="0" role="none">
<filter id="drop-shadow5" color-interpolation-filters="sRGB">
<feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" />
</filter>
</svg>
Die folgenden Deklarationen erzeugen denselben Effekt:
filter: drop-shadow(5px 5px 3px black);
filter: url("#drop-shadow5"); /* with embedded SVG */
filter: url("fileName.svg#drop-shadow5"); /* external SVG */
CSS
Wir fügen CSS hinzu, das auf Elemente mit der Klasse css-filter oder svg-filter einen Schlagschatten anwendet:
.css-filter {
filter: drop-shadow(5px 5px 3px black);
}
.svg-filter {
filter: url("#drop-shadow5");
}
Spezifikationen
| Spezifikation |
|---|
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Browser-Kompatibilität
Siehe auch
- Modul CSS-Filtereffekte
- Weitere
<filter-function>-Funktionen, die als Werte für die Eigenschaftenfilterundbackdrop-filterverwendet werden können: