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
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 verschwommene, versetzte Version der Alpha-Maske des Eingabebildes, die in einer bestimmten Farbe gezeichnet und unter dem Bild zusammengesetzt wird.
Hinweis:
Diese Funktion ist der Eigenschaft box-shadow ähnlich. Die box-shadow-Eigenschaft erstellt einen rechteckigen Schatten hinter dem gesamten Kasten eines Elements, während die drop-shadow()-Filterfunktion einen Schatten erstellt, 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(#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)
Die drop-shadow()-Funktion akzeptiert einen Parameter vom Typ <shadow> (definiert in der box-shadow-Eigenschaft), mit der Ausnahme, dass das Schlüsselwort inset und die Parameter spread nicht erlaubt sind.
Parameter
<color>Optional-
Bestimmt die Farbe des Schattens. Wenn nicht angegeben, wird der Wert der
color-Eigenschaft des übergeordneten Elements verwendet. <length>-
Bestimmt die Versatzlänge des Schattens. Dieser Parameter nimmt zwei oder drei Werte an. Wenn zwei Werte angegeben werden, 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 Wert0verwendet. Wenn ein dritter Wert angegeben wird, wird dieser als<standard-deviation>interpretiert, was dem Wert der Standardabweichung für die Gauss'sche Unschärfe entspricht. 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
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
Beispiele
Einen Schlagschatten setzen
<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);
}
In Abwesenheit eines <color>-Wertes in der drop-shadow()-Funktion der ersten Box verwendet der Schatten den Wert der color-Eigenschaft des Elements (lime). Die zweiten und dritten Schatten veranschaulichen, 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. Das fünfte Beispiel zeigt, wie Sie mehrere Schlagschatten auf einem einzelnen Element verwenden.
Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Browser-Kompatibilität
Loading…