Comment puis-je créer une ombre portée unilatérale en CSS ?

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

Obtenir une ombre portée qui n'affecte qu'un seul côté d'un élément peut être une exigence courante dans le Web conception. Par exemple, vous pouvez rencontrer un scénario dans lequel vous souhaitez qu'une ombre tombe sous un élément sans chevaucher les éléments adjacents.

Une méthode pour obtenir cet effet consiste à utiliser la propriété box-shadow, qui vous permet de spécifier la taille. , la répartition et la couleur d'une ombre autour d'un élément. Cependant, le comportement par défaut de box-shadow est de créer une ombre de tous les côtés de l'élément.

Création d'une ombre portée en bas uniquement

Pour créer une ombre portée ombre qui s'affiche uniquement sous un élément, vous pouvez créer un pseudo-élément et le positionner au bas de l'élément parent. Ce pseudo-élément recevra alors l'effet d'ombre.

Voici un exemple mis à jour de la question d'origine utilisant la syntaxe CSS moderne :

#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;
}

Ce code créera une ombre portée qui s'étend uniquement vers le bas à partir de le bas de l'élément #box, donnant effectivement l'impression d'une ombre uniquement en bas. Le pseudo-élément est positionné en bas avec un z-index de -1 pour garantir qu'il apparaît derrière l'élément principal.

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!