Wie kann ich CSS-Schlagschatten für nicht quadratische PNG-Bilder erstellen?

CSS-Schlagschatteneffekte für nicht quadratische PNG-Bilder

Das Erstellen eines Schlagschatteneffekts für nicht quadratische PNG-Bilder mit CSS kann schwierig sein . Der Standardansatz mit der Box-Shadow-Eigenschaft führt zu einem quadratischen Schatten, der nicht den Konturen des Bildes folgt.

Glücklicherweise gibt es eine Lösung mit der Filtereigenschaft:

Filter verwenden: dropShadow()

Mit der Eigenschaft filter: dropShadow() können Sie einen unscharfen Schatteneffekt mit benutzerdefinierten Offsets erstellen und Farbe:

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

wobei:

• x und y die horizontalen und vertikalen Versätze des Schattens darstellen
• Unschärfe bestimmt den Unschärferadius des Schattens
• Farbe ist die Schattenfarbe

CSS Beispiel:

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

Inline-Beispiel:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="Wie kann ich CSS-Schlagschatten für nicht quadratische PNG-Bilder erstellen?" >

Mit dieser Technik können Sie Schlagschatteneffekte erstellen, die der Form von nicht quadratischen Objekten genau folgen PNG-Bilder, die ihnen eine realistische Tiefe und Dimension verleihen.

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