Comment puis-je créer des ombres portées précises pour des images PNG de forme irrégulière à l'aide de CSS ?

Application d'une ombre portée à des images PNG de forme irrégulière à l'aide de CSS

L'approche standard pour appliquer une ombre portée à une image PNG à l'aide de -o- box-shadow, -icab-box-shadow, -khtml-box-shadow, -moz-box-shadow, -webkit-box-shadow ou box-shadow propriétés traite l'image comme un carré. Cela peut avoir pour conséquence que l'ombre ne soit pas conforme à la forme réelle de l'image.

Pour appliquer une ombre portée qui suit avec précision les contours d'une image PNG non carrée, vous pouvez utiliser le filtre CSS : dropShadow() propriété. Cette syntaxe de propriété est la suivante :

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

Ici, x et y représentent respectivement les décalages horizontaux et verticaux de l'ombre, tandis que le flou définit le flou des bords de l'ombre. Le paramètre de couleur facultatif définit la couleur de l'ombre.

Cette technique peut être appliquée à l'aide de règles CSS classiques :

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

Vous pouvez également spécifier le filtre en ligne pour des images individuelles :

<img src="image.png">

En utilisant la propriété filter: dropShadow(), vous pouvez obtenir des ombres portées précises sur des images PNG de forme irrégulière, améliorant ainsi leur attrait visuel et ajoutant de la profondeur à votre image. dessins.

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!