Comment puis-je créer une ombre portée pour les images PNG irrégulières en CSS ?

Application d'une ombre portée à des images PNG irrégulières en CSS

Créer un effet d'ombre portée pour une image PNG de forme irrégulière peut présenter un défi en utilisant la propriété CSS box-shadow standard. En effet, box-shadow ajoute une ombre de forme carrée autour de l'image, qui n'est pas conforme à la forme de l'objet dans l'image.

Solution : Utilisation de la propriété de filtre CSS

Pour ajouter une ombre portée à une image PNG de forme irrégulière, nous pouvons utiliser la propriété de filtre CSS avec la fonction dropShadow(). Cette fonction prend quatre paramètres : décalage x, décalage y, rayon de flou et couleur.

Exemple de code

Voici un exemple de la façon d'appliquer une goutte ombre à l'aide de la fonction dropShadow() :

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

Dans cet exemple, nous appliquons une ombre portée avec un décalage de 5 px dans les deux Directions x et y, un rayon de flou de 5 pixels et une couleur noire (#222).

Style en ligne

Vous pouvez également appliquer l'ombre portée en ligne, en utilisant le attribut de style :

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png"
style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

L'utilisation de la fonction dropShadow() vous permet de créer une ombre portée qui suit avec précision la forme de l'image PNG, offrant ainsi un effet plus effet visuellement attrayant et réaliste.

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!