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 Schatteneffekt 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 unterhalb des Bildes gezeichnet 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 der Form (Alphakanal) des Bildes selbst entspricht.
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)
/* 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 des Typs <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 für den Schatten an. Wenn keine Farbe angegeben ist, 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 vom Element. Ein negativer<offset-y>
-Wert platziert den Schatten oberhalb des Elements. 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, das ist der Standardabweichungswert für die Gaussian Blur-Funktion. Ein größerer<standard-deviation>
-Wert erzeugt einen größeren und stärker verschwommenen Schatten. Negative Werte für<standard-deviation>
sind nicht erlaubt.
Formale Syntax
Beispiele
Einstellen eines Schattens
<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);
}
Fehlt ein <color>
-Wert in der drop-shadow()
-Funktion im ersten Kasten, verwendet der Schatten den Wert der color
-Eigenschaft des Elements (lime
). Die zweite und dritte 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 ist. Der vierte Schatten verwendet negative Versätze, die den Schatten nach links und oben verschieben. Das fünfte Beispiel zeigt, wie mehrere Schlagschatten auf einem einzigen Element verwendet werden können.
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
drop-shadow() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
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
-Eigenschafttext-shadow
-Eigenschaft