Explication détaillée de l'ombre CSS3

Cette fois, je vous apporte une explication détaillée des ombres CSS3. Quelles sont les précautions lors de l'utilisation des ombres CSS3. Voici des cas pratiques, jetons un coup d'œil.

box-shadow
Paramètres :
h-shadow (obligatoire) : la position de l'ombre horizontale, les valeurs négatives sont autorisées
v-shadow (obligatoire) : la position de l'ombre verticale, les valeurs négatives sont autorisées
flou (facultatif) : distance du flou
étalement (facultatif) : taille de l'ombre
couleur (facultatif) : couleur de l'ombre
encart (facultatif) : ombre extérieure (début) Passer à l'ombre intérieure
par exemple :

<style>
   .effect{
       position: relative;
       width: 800px;
       height: 200px;
       background-color: #fff;
       box-shadow: 0px 1px 4px rgba(0,0,0,0.3)
       ,0px 0px 40px rgba(0,0,0,0.1) inset;  //水平和垂直阴影的值都设置为0，阴影会从中间发散至四周。
   }
    .effect:after,.effect:before{
        position: absolute;
        content: &#39;&#39;;
        background: #fff;
        top:50%;
        bottom:0;
        left: 10px;
        right: 10px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
        z-index: -999;
        border-radius: 100px/10px;
   }</style><div class="effect"></div>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée de Require.js

Utiliser JS pour implémenter l'algorithme de tri

Le mode singleton de Javascript

Comment utiliser les expressions régulières en JS

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!