Beispielcode für Box-Shadow und Drop-Shadow zum Erreichen einer unregelmäßigen Projektion

Wenn wir einem Rechteck oder einer anderen Form, die mit einem Rahmenradius erzeugt werden kann (siehe einige Beispiele im Abschnitt „Adaptive Ellipse“), einen Schatten hinzufügen möchten, funktioniert Box-Shadow perfekt. Es wird jedoch etwas machtlos, wenn dem Element einige Pseudoelemente oder halbtransparente Dekorationen hinzugefügt wurden, da der Rahmenradius die transparenten Teile schamlos ignoriert. Zu solchen Situationen gehören:

• Durchscheinende Bilder, Hintergrundbilder oder Randbilder (wie z. B. altmodische Goldrahmen);
• Das Element hat einen gepunkteten, gestrichelten oder halbtransparenten Rand, aber keinen Hintergrund (oder wenn der Hintergrundclip nicht der Rahmenrahmen ist);
• Sprechblasen, deren Enden meist durch Pseudoelemente erzeugt werden;

Würden wir Box-Shadow direkt auf solche Elemente anwenden, würden wir nur eine unvollständige Projektion erhalten. Ist es möglich, dass wir nur auf den Projektionseffekt vollständig verzichten können? Gibt es eine Möglichkeit, dieses Problem zu lösen?

Die Filter Effects-Spezifikation (http://w3.org/TR/filter-effects) bietet eine Lösung für dieses Problem. Es führt ein neues Attribut namens Filter ein, das ebenfalls von SVG übernommen wurde. Obwohl CSS-Filter grundsätzlich SVG-Filter sind, sind für ihre Verwendung keine SVG-Kenntnisse erforderlich. Stattdessen benötigen wir nur wenige Funktionen, um Filtereffekte einfach festzulegen, etwa Unschärfe (), Graustufen () und (wir brauchen) Schlagschatten ()! Wenn Sie möchten, können Sie sogar mehrere Filter miteinander verketten, indem Sie sie durch Leerzeichen trennen, zum Beispiel:

Filter: Unschärfe () Graustufen () Schlagschatten ();

Der Filter drop-shadow() akzeptiert dieselben Parameter wie die Eigenschaft box-shadow, enthält jedoch keinen Erweiterungsradius, schließt das Schlüsselwort inset nicht ein und unterstützt keine durch Kommas getrennte Syntax für mehrschichtige Schatten. Beispielsweise die Projektion oben:

Kastenschatten: 2px 2px 10px rgba(0,0,0,.5);

Sie können es so schreiben:

Filter: Schlagschatten (2px 2px 10px rgba(0,0,0,.5)); 

Das Beste an CSS-Filtern ist, dass sie sich elegant abbauen: Wenn ein Browser sie nicht unterstützt, passiert nichts, sie haben einfach keine Wirkung. Wenn dieser Effekt unbedingt in möglichst vielen Browsern funktionieren soll, können Sie auch einen SVG-Filter anhängen, um eine etwas bessere Browserunterstützung zu erhalten. Die entsprechende SVG-Filterversion für jede Filterfunktion finden Sie in der Filter Effects-Spezifikation (http://www.w3.org/TR/filter-effects/). Sie können SVG-Filter mit vereinfachten CSS-Filtern kombinieren und die Kaskade entscheiden lassen, welche Zeile angewendet wird:

Filter: URL (Drop-Shadow.svg#Drop-Shadow);
Filter: Schlagschatten (2px 2px 10px rgba(0,0,0,.5));

Wenn der SVG-Filter in einer separaten Datei gespeichert ist, kann er leider nicht wie eine prägnante und einfach zu verwendende Funktion frei im CSS-Code konfiguriert werden. Wenn er inline ist, wird er Ihren Code überladen. Die Parameter müssen in der Datei fest codiert sein. Daher müssen wir jedes Mal, wenn wir einen neuen Projektionseffekt hinzufügen, auch wenn dieser ähnlich ist, eine zusätzliche Datei vorbereiten, was offensichtlich nicht akzeptabel ist. Natürlich können wir auch Daten-URIs verwenden (wodurch auch die zusätzliche HTTP-Anfrage eingespart wird), aber diese Methode erhöht dennoch die Dateigröße. Im Allgemeinen ist dieser Ansatz nur eine Fallback-Lösung. Solange wir die Anzahl der SVG-Filter unter einem bestimmten Grenzwert halten, ist er akzeptabel, auch wenn ihre Effekte ähnlich sind.

Außerdem sollten Sie bedenken, dass alles, was nicht transparent ist, gleichmäßig schattiert wird, einschließlich Text (wenn der Hintergrund transparent ist), wie wir gerade gesehen haben. Sie fragen sich vielleicht: Kann ich den Schatten auf dem Text durch die Verwendung von „text-shadow: none;“ aufheben? Tatsächlich hat Textschatten überhaupt nichts damit zu tun, sodass der Drop-Shadow()-Effekt auf dem Text hierdurch nicht aufgehoben wird. Wenn Sie darüber hinaus bereits Textshadow verwendet haben, um dem Text einen Schlagschatten hinzuzufügen, wird der Textschatten durch den Filter drop-shadow() überschattet, der dem Schatten im Wesentlichen einen Schlagschatten hinzufügt! Sehen Sie sich das folgende Codebeispiel an (bitte entschuldigen Sie die schrecklichen Ergebnisse, es soll nur dieses seltsame Problem hervorheben):

Farbe: dunkelrosa;
Rand: 2px durchgezogen;
Textschatten: .1em .2em gelb;
Filter: Schlagschatten (.05em .05em .1em grau);

Sie können den Rendering-Effekt sehen. Der Text im Bild ist sowohl mit Textshadow als auch mit Drop-Shadow() markiert.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.