Comment utiliser l'effet d'ombre de box-shadow

Cette fois, je vais vous montrer comment utiliser l'effet ombre boîte-ombre. Quelles sont les précautions lors de l'utilisation de l'effet ombre boîte-ombre. Voici un cas pratique, jetons un oeil.

Tout le monde sait que box-shadow est un nouvel attribut de h5, qui est utilisé pour obtenir l'effet d'ombre sur le bord de la boîte. Cependant, nous voyons souvent différents styles d'ombre dans de nombreuses scènes, et c'est le cas. pas simplement une ombre autour de la boîte. Les effets, comment sont-ils obtenus ? Aujourd'hui, je vais partager avec vous deux façons d'obtenir des ombres.

1. Ombre courbée

Le rendu est le suivant : Il y a non seulement des ombres autour, mais aussi une couche d'ombre courbée au niveau Le principe est en fait très simple. Tout d'abord, la boîte elle-même a une ombre, puis une autre boîte avec une ombre est utilisée pour la chevaucher afin de former l'ombre incurvée dans le rendu.

Tout d'abord, parlons de la syntaxe de box-shadow Il prend en charge l'écriture de plusieurs ombres, séparées par des virgules, comme suit

<.>

Créez une boîte et utilisez box-shadow pour donner à la boîte une ombre extérieure et une ombre intérieure avec un rayon de floraison nul de 10 px dans les directions des axes x et y.

style{
      .box1{
                width: 400px;
                height: 200px;
                background: white;
                border: 1px solid lightgrey;
                margin: 100px auto;
                text-align: center;
                line-height: 200px;
                box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.3) inset;
        }
}
body{
      <p>
      <span>曲边阴影</span>
      </p>
}

Utilisez le sélecteur de classe after pseudo-

pour ajouter une étiquette virtuelle derrière le sous-ensemble box1 Puisqu'il s'agit d'une étiquette virtuelle, le navigateur ne peut pas la reconnaître. attribut d'affichage. Cette étiquette a également une ombre. Puisqu'il s'agit d'une surface courbe, le rayon de bordure doit être défini pour lui donner une courbure. Utilisez ensuite le positionnement pour superposer l'étiquette virtuelle avec la boîte d'origine, et utilisez z-index pour modifier le niveau afin qu'il soit inférieur à p. Le code est le suivant

.box1::after{
                display: block;  //必须写
                content: "";     //必须写
                z-index: -1;
                width: 390px;
                height: 150px;
                background: red;
                position: absolute;
                bottom: 0;
                left: 4px;
                border-radius: 30px/10px;
                box-shadow: 0 8px 10px rgba(0,0,0,0.3);
                
            }

Quand il n'y a pas de positionnement, les deux cases sont disposées comme suit :

Après positionnement, l'ombre du bord incurvé est réalisé : l'image du résultat Comme suit :

2. Ombre à bord incurvé

Le principe est la même chose que l'ombre à bord incurvé, en utilisant des pseudo-classes. Les sélecteurs ::afteryu et ::before ajoutent deux étiquettes virtuelles et utilisent le chevauchement des ombres pour obtenir des ombres déformant les bords.

Le code est le suivant :

.box2::after,.box2::before{
                display: block;
                content: "";
                z-index: -1;
                width: 170px;
                height: 240px;
                background: red;
                position: absolute;
                bottom: 20px;
                left: 38px;
                box-shadow: 30px 10px 40px rgba(0,0,0,0.5); 
                transform: skewX(-15deg);   
            }
            .box2::before{
                box-shadow: -20px 10px 40px rgba(0,0,0,0.5);    
                transform: skewX(15deg);    
            }

Pour notre commodité, un fond rouge est donné. Le résultat sans changement de niveau est le suivant :

Ajustez deux Le niveau de la box, l'effet est le suivant :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus d'excitant. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Explication détaillée de l'utilisation des événements de pointeur en CSS3

Utilisation de pseudo-éléments : avant et :: après Explication détaillée

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!