Comment appliquer une ombre de boîte en médaillon à des images avec CSS ?

Incrustation d'ombres de boîtes et d'images : une solution de contournement

L'utilisation d'ombres de boîtes en médaillon sur des conteneurs contenant des images entraîne souvent que l'ombre n'apparaisse pas par-dessus les images. Pour surmonter cette limitation, on peut recourir à une solution CSS unique.

En employant le pseudo-élément :after, un deuxième calque porteur d'ombre peut être créé. Voici un exemple de code démontrant cette technique :

CSS :

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

HTML :

<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>

Cette méthode élimine le besoin d'éléments supplémentaires dans le balisage, offrant un approche propre et basée sur CSS. L'élément :after agit comme un "conteneur d'ombre" qui recouvre l'image, permettant à l'ombre de la boîte en médaillon de s'étendre dessus.

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!