Comment puis-je créer des ombres portées pour des images PNG de forme irrégulière en CSS ?

Création d'ombres portées pour des images PNG non carrées en CSS

Appliquer une ombre portée à une image PNG de forme irrégulière peut être un défi en utilisant les propriétés traditionnelles de l'ombre de la boîte. Pour obtenir une ombre portée appropriée et conforme à la forme de l'image, la propriété filter: dropShadow() peut être utilisée.

Solution CSS :

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

Solution en ligne :

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="Comment puis-je créer des ombres portées pour des images PNG de forme irrégulière en CSS ?" >

La propriété dropShadow() prend plusieurs paramètres :

• x et y : La distance de l'ombre à l'image en pixels
• flou (facultatif) : Le flou de l'ombre en pixels
• color: La couleur de l'ombre shadow

En définissant la propriété du filtre sur drop-shadow(), le navigateur générera une ombre autour de l'image qui suit sa forme, fournissant l'effet souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!