Comment puis-je créer des ombres portées conformes à la forme pour les images PNG en CSS ?

Ombres portées pour les images PNG en CSS

Créer des ombres portées pour les images PNG en CSS peut être difficile, en particulier pour celles qui n'ont pas de forme carrée. formes. L'approche typique utilisant box-shadow aboutit souvent à des ombres carrées qui ne sont pas conformes à la forme de l'image.

La solution : utiliser le filtre : dropShadow()

Le filter : la propriété dropShadow() fournit une solution à ce problème. Il vous permet d'appliquer une ombre portée avec un contrôle précis sur les décalages x et y, le rayon de flou et la couleur. Ce filtre peut être utilisé directement en CSS ou appliqué en ligne.

Exemple CSS :

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

Exemple en ligne :

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

En utilisant le filtre : dropShadow(), vous pouvez obtenir des ombres portées réalistes et conformes à la forme pour les images PNG non carrées, améliorant ainsi le visuel. l'attrait de vos conceptions Web.

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!