Wie kann ich in CSS formkonforme Schlagschatten für PNG-Bilder erstellen?

Schlagschatten für PNG-Bilder in CSS

Das Erstellen von Schlagschatten für PNG-Bilder in CSS kann eine Herausforderung sein, insbesondere für diejenigen mit nicht quadratischen Bildern Formen. Der typische Ansatz mit Box-Shadow führt oft zu quadratischen Schatten, die nicht der Form des Bildes entsprechen.

Die Lösung: Filter verwenden: dropShadow()

Die Die Eigenschaft filter: dropShadow() bietet eine Lösung für dieses Problem. Sie können damit einen Schlagschatten mit präziser Kontrolle über die x- und y-Versatze, den Unschärferadius und die Farbe anwenden. Dieser Filter kann direkt in CSS verwendet oder inline angewendet werden.

CSS-Beispiel:

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

Inline-Beispiel:

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

Durch die Verwendung von Filter: dropShadow() können Sie realistische und formkonforme Schlagschatten für nicht quadratische PNG-Bilder erzielen und so die Optik verbessern Attraktivität Ihrer Webdesigns.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS formkonforme Schlagschatten für PNG-Bilder erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!