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
/* 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 Wert0
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
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 {
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:
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
box-shadow
-Eigenschafttext-shadow
-Eigenschaft