Comment puis-je créer un effet d'ombre sur un seul côté en CSS ?

Déposer une ombre sur un seul côté d'un élément

La création d'un effet d'ombre sur un élément est généralement obtenue à l'aide de la propriété box-shadow, qui peut appliquer des ombres sur tous les côtés d’un élément. Cependant, dans certains scénarios, il peut être souhaitable que l'ombre apparaisse sur un seul côté, comme le bas, sans chevaucher d'autres éléments adjacents.

Une approche pour y parvenir consiste à utiliser un pseudo- élément comme :after pour créer un calque supplémentaire sous l’élément principal. Ce calque peut ensuite être positionné et stylisé séparément pour présenter l'effet d'ombre souhaité.

Considérez le code suivant :

#box {
  background-color: #3D6AA2;
  width: 160px;
  height: 90px;
  position: absolute;
  top: calc(10% - 10px);
  left: calc(50% - 80px);
}

.box-shadow:after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 1px;
  z-index: -1;
  transform: scale(.9);
  box-shadow: 0px 0px 8px 2px #000000;
}

Dans cet exemple, nous créons un élément conteneur avec la zone ID et ajoutez-y une classe CSS .box-shadow. Le pseudo-élément :after est ajouté dans .box-shadow et stylisé avec des dimensions, un positionnement et des propriétés d'ombre spécifiques.

En définissant bottom: 1px et transform: scale(.9) sur le pseudo-élément :after élément, nous créons une forme étroite et légèrement inclinée qui apparaît sous l’élément principal. La propriété box-shadow ajoute ensuite un effet d'ombre à cette forme, entraînant l'apparition d'une ombre uniquement sur la face inférieure de l'élément principal.

Cette technique permet le placement précis et la personnalisation des ombres sans affecter d'autres parties de la conception, offrant une solution polyvalente pour diverses exigences d'aménagement.

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!