Pourquoi mon ombre de boîte en médaillon ne fonctionne-t-elle pas sur les images en CSS ?

Inset Box Shadow ne fonctionne pas sur les images : une solution CSS

En CSS, la propriété box-shadow crée une ombre autour d'un élément, l'étendre en dehors des limites de l'élément. Cependant, lorsqu'elle est appliquée à une image, cette ombre ne semble souvent pas s'étendre sur l'image.

Pour résoudre ce problème, vous pouvez exploiter le pseudo-élément :after. Cela vous permet de créer un élément supplémentaire dans le conteneur parent, permettant à l'ombre d'être appliquée à cet élément au lieu de l'image directement.

Voici un exemple :

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: outset 3px 3px 10px 0 #000000;
}

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

En ajoutant ceci :après déclaration à l'élément principal, vous créez un calque invisible et transparent sur l'image. L'ombre est ensuite appliquée sur ce calque, lui permettant de s'étendre sur l'image comme vous le souhaitez.

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!