Maison > interface Web > tutoriel CSS > le corps du texte

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

Linda Hamilton
Libérer: 2024-10-31 07:27:30
original
838 Les gens l'ont consulté

How to Apply Inset Box-Shadow to Images with 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%;
}
Copier après la connexion

HTML :

<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal