Wie kann ich mit CSS3 einen SVG-Schlagschatten erstellen?

SVG-Schlagschatten mit CSS3

Implementieren von Schlagschatten mit CSS3

Es ist möglich, SVG-Elementen mit CSS3 einen Schlagschatteneffekt hinzuzufügen. Im Gegensatz zu früheren Box-Shadow- oder -webkit-Box-Shadow-Eigenschaften beinhaltet der moderne Ansatz die Verwendung der CSS-Filtereigenschaft.

Verwendung der CSS-Filtereigenschaft

Unterstützt von gängigen Browsern wie Webkit und Firefox 34 und Edge bietet die CSS-Filtereigenschaft eine spezielle Syntax für Schlagschatteneffekte:

filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));

Anwenden des Schlagschattens Effekt

Wenden Sie die Filtereigenschaft auf Ihr SVG-Element mit der Klasse „.shadow“ an:

.shadow {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

Der Schlagschatteneffekt wird auf jedes SVG-Element mit der Klasse „.shadow“ angewendet , einschließlich Bilder, Formen und Gruppen. Das Erscheinungsbild des Schattens kann durch Anpassen der Werte innerhalb der Filterfunktion angepasst werden.

Browserübergreifende Kompatibilität

Während die Filtereigenschaft allein eine hervorragende Unterstützung bietet, benötigen Sie möglicherweise eine Polyfüllung für ältere Browser wie FF < 34 oder IE6 . Polyfills können das Verhalten des Filtereffekts nachahmen und so die Kompatibilität mit einer größeren Auswahl an Browsern gewährleisten.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS3 einen SVG-Schlagschatten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!