Comment puis-je créer des ombres portées CSS pour les images PNG non carrées ?

Effets d'ombre portée CSS pour les images PNG non carrées

Créer un effet d'ombre portée pour les images PNG non carrées à l'aide de CSS peut être délicat . L'approche standard consistant à utiliser la propriété box-shadow aboutit à une ombre carrée qui ne suit pas les contours de l'image.

Heureusement, il existe une solution utilisant la propriété filter :

Utilisation du filtre : dropShadow()

La propriété filter : dropShadow() vous permet de créer un effet d'ombre floue avec des décalages personnalisés et color:

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

où:

• x et y représentent les décalages horizontaux et verticaux de l'ombre
• le flou détermine le rayon de flou de l'ombre
• la couleur est la couleur de l'ombre

CSS Exemple :

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

Exemple en ligne :

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="Comment puis-je créer des ombres portées CSS pour les images PNG non carrées ?" >

Cette technique vous permet de créer des effets d'ombre portée qui suivent avec précision la forme d'objets non carrés. Images PNG, leur donnant une profondeur et une dimension réalistes.

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!