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

Schlagschatten auf unregelmäßig geformte PNG-Bilder mit CSS anwenden

Der Standardansatz zum Anwenden eines Schlagschattens auf ein PNG-Bild mit -o- Die Eigenschaften box-shadow, -icab-box-shadow, -khtml-box-shadow, -moz-box-shadow, -webkit-box-shadow oder box-shadow behandeln das Bild als Quadrat. Dies kann dazu führen, dass der Schatten nicht der tatsächlichen Form des Bildes entspricht.

Um einen Schlagschatten anzuwenden, der genau den Konturen eines nicht quadratischen PNG-Bildes folgt, können Sie den CSS-Filter verwenden: dropShadow() Eigentum. Die Syntax dieser Eigenschaft lautet wie folgt:

filter: drop-shadow(x y blur? color?);

Hier repräsentieren x und y die horizontalen bzw. vertikalen Versätze des Schattens, während Unschärfe die Unschärfe der Schattenkanten definiert. Der optionale Farbparameter legt die Schattenfarbe fest.

Diese Technik kann mithilfe regulärer CSS-Regeln angewendet werden:

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

Alternativ können Sie den Filter inline für einzelne Bilder festlegen:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="Wie kann ich mit CSS präzise Schlagschatten für unregelmäßig geformte PNG-Bilder erstellen?" >

Durch die Verwendung der Eigenschaft filter: dropShadow() können Sie präzise Schlagschatten auf unregelmäßig geformten PNG-Bildern erzielen, deren visuelle Attraktivität verbessern und Ihrem Bild Tiefe verleihen Designs.

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