CSS Box Shadow vs. Drop Shadow im Detail

Abgerundete Schatten. Webdesigner lieben sie schon lange, so sehr, dass wir sie früher mit PNG-Bildern nachgeahmt haben, bevor CSS Level 3 sie mit der box-shadow-Eigenschaft offiziell in die Spezifikation aufgenommen hat. Ich greife in meiner Arbeit immer noch oft zu Abrundungsschatten, da sie in manchen Kontexten, wie zum Beispiel bei weitgehend flachen Designs, eine schöne Textur hinzufügen.

Nicht lange nachdem box-shadow eingeführt wurde, tauchte ein Arbeitsentwurf für CSS Filter auf und mit ihm eine Methode für drop-shadow(), die auf den ersten Blick box-shadow sehr ähnlich sieht. Die beiden sind jedoch unterschiedlich und es lohnt sich, diese Unterschiede zu vergleichen.

Für mich wurde der Hauptunterschied früh klar, als ich anfing, mit box-shadow zu arbeiten. Hier ist ein einfaches Dreieck, nicht unähnlich dem, das ich damals erstellt habe.

Lassen Sie uns dies verwenden, um den Unterschied zwischen den beiden zu erläutern.

Box Shadow

Fügen Sie diesem guten Stück ein box-shadow hinzu und das passiert.

Es ist ärgerlich, aber verständlich. CSS verwendet ein Box-Modell, bei dem die Ränder des Elements die Form eines Rechtecks haben. Selbst wenn die Form des Elements kein Rechteck zu sein scheint, ist das Rechteck immer noch vorhanden, und darauf wird box-shadow angewendet. Dies war mein „Aha-Moment“ beim Verständnis des Wortes Box in box-shadow.

CSS Filter Drop Shadow

CSS Filter sind ziemlich großartig. Werfen Sie einen Blick auf alle Möglichkeiten zur Anwendung visueller Filter auf Elemente und staunen Sie, wie CSS plötzlich viele Dinge tut, die wir früher in Photoshop erstellen mussten.

Filter sind nicht an das Box-Modell gebunden. Das bedeutet, dass die Umrisse unseres Dreiecks erkannt werden und die Transparenz darum herum ignoriert wird, sodass die beabsichtigte Form den Schatten erhält.

Entscheidung, welche Methode verwendet werden soll

Die Antwort liegt ganz bei Ihnen. Das einfache Beispiel eines Dreiecks oben könnte den Eindruck erwecken, dass filter: drop-shadow() besser ist, aber es ist kein fairer Vergleich der Vorteile oder gar der Möglichkeiten beider Methoden. Es ist lediglich eine Veranschaulichung ihres unterschiedlichen Verhaltens in einem bestimmten Kontext.

Wie bei den meisten Dingen in der Entwicklung hängt die Antwort auf die Frage, welche Methode verwendet werden soll, vom Einzelfall ab. Hier ist ein Seitenvergleich, der helfen soll, die beiden zu unterscheiden und wann es am besten ist, die eine der anderen vorzuziehen.

	Box Shadow	Drop Shadow
Spezifikation	CSS Backgrounds and Borders Module Level 3	Filter Effects Module Level 1
Browser-Unterstützung	Großartig	Gut
Unterstützt Spread Radius	Ja, als optionaler vierter Wert	Nein
Blur Radius	Berechnung basiert auf einer Pixellänge	Berechnung basiert auf dem stdDeviation-Attribut des SVG-Filters
Unterstützt inset Schatten	Ja	Nein
Leistung	Nicht Hardware-beschleunigt	Hardware-beschleunigt in Browsern, die es unterstützen. Ohne ist es ein großer Aufwand.

Zusammenfassend

Der Unterschied zwischen box-shadow und filter: drop-shadow() liegt wirklich im CSS-Box-Modell. Eines erkennt es, das andere ignoriert es. Es gibt noch weitere Unterschiede, die die beiden in Bezug auf Browser-Unterstützung, Leistung und dergleichen unterscheiden, aber die Art und Weise, wie die beiden mit dem Box-Modell umgehen, ist der entscheidende Unterschied.

Update: Amelia hat einen weiteren wichtigen Unterschied in den Kommentaren identifiziert, bei dem die Ausbreitung des Radius für drop-shadow() anders berechnet wird als bei box-shadow und sogar bei text-shadow. Das bedeutet, dass der von Ihnen möglicherweise in box-shadow angegebene Spread-Radius nicht eins zu eins mit dem Standard-Spread-Wert für drop-shadow übereinstimmt, sodass die beiden in einigen Fällen keine gleichen Ersatz füreinander sind.

Lassen Sie uns dies mit einigen anderen großartigen Beispielen abschließen, die dies veranschaulichen. Lennart Schoors hat auch einen schönen Artikel mit praktischen Beispielen für Tooltips und Icons, die wir bereits vorgestellt haben.