Comment créer un rendu d'ombres de boîte incrustée sur des images ?

Incrustation d'ombre de boîte et chevauchement d'images

Dans un scénario où un conteneur avec une ombre de boîte en médaillon contient à la fois des images et du texte, il peut sembler que l'ombre ne rendu sur les images. Ce problème se produit car l'ombre incrustée est appliquée au conteneur lui-même, alors que l'image est un élément distinct au sein du conteneur.

Pour résoudre ce problème et obtenir l'effet d'ombre souhaité, pensez à utiliser  :after pseudo-élément :

<code class="css">main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

En ajoutant ce CSS, une boîte semi-transparente est créée sur l'image, permettant ainsi à l'ombre incrustée de s'étendre sur toute la surface de l'image. conteneur, y compris l'image.

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!