Wie kann ich Schlagschatten für unregelmäßig geformte PNG-Bilder in CSS erstellen?

Erstellen von Schlagschatten für nicht quadratische PNG-Bilder in CSS

Das Anwenden eines Schlagschattens auf ein PNG-Bild mit unregelmäßiger Form kann ein Problem sein Herausforderung mit traditionellen Box-Shadow-Eigenschaften. Um einen richtigen Schlagschatten zu erzielen, der der Form des Bildes entspricht, kann die Eigenschaft filter: dropShadow() verwendet werden.

CSS-Lösung:

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

Inline-Lösung:

<img src="image.png">

Die Eigenschaft dropShadow() benötigt mehrere Parameter:

• x und y: Der Abstand des Schattens vom Bild in Pixel
• Unschärfe (optional): Die Unschärfe des Schattens in Pixel
• Farbe: Die Farbe des Schatten

Indem Sie die Filtereigenschaft auf drop-shadow() setzen, erzeugt der Browser einen Schatten um das Bild, der seiner Form folgt und so den gewünschten Effekt liefert.

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