Comment créer une ombre portée unilatérale avec CSS ?

Création d'une ombre portée unilatérale

Pour créer une ombre portée qui n'apparaît que sur un côté d'un élément, vous pouvez utiliser les propriétés CSS et les pseudo-éléments. Voici une solution détaillée :

Utilisation du ::after Pseudo-Element

.box {
  position: relative;
  width: 200px;
  height: 100px;
}

.box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 10px #000000;
  z-index: -1;
}

Dans ce code, nous créons un élément parent avec une classe de box qui positionne l'élément. Ensuite, nous stylisons le pseudo-élément ::after pour créer l'ombre portée en spécifiant les propriétés de position, de taille et de box-shadow. Le z-index est réglé sur -1 pour placer l'ombre derrière l'élément principal.

Ajout d'un dégradé de flou

Pour améliorer l'apparence de l'ombre, vous pouvez appliquer un flou dégradé à l'ombre de la boîte :

.box::after {
  ...
  box-shadow: 0px 10px 10px 10px rgba(0, 0, 0, 0.5);
}

Ce code supplémentaire ajoute un flou dégradé à l'ombre, créant un effet plus subtil et réaliste effet.

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!