Le moyen le plus efficace de créer des ombres de boîte avec CSS

Question

Je suis intéressé à trouver quelle manière de créer des ombres de boîte avec CSS est la plus efficace. Mais je veux dire par là: facilité d’implémentation, flexibilité et compatibilité entre navigateurs.

Answer 1

La pelure d'oignon est mon préféré.

Vous trouverez un exemple dans cet un article alistapart .

Answer 2

C’est maintenant très simple à réaliser:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

La première valeur est le décalage horizontal. La deuxième valeur est le décalage vertical. La troisième valeur est la propagation de l’effet de flou. La quatrième valeur est la couleur.

De plus, vous pouvez ajouter une autre valeur encart , ce qui fera apparaître l'ombre à l'intérieur de l'élément de bloc:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

C’est désormais très bien pris en charge: https://caniuse.com/#feat=css- boxshadow

Answer 3

La façon dont je trouve le plus efficace actuellement est la suivante:

Les règles CSS nécessaires:

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

Code HTML sur lequel le CSS est appliqué:

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

Je l’ai trouvé très simple à mettre en œuvre, flexible et fonctionne de la même manière sur FF 3, IE 6 & amp; 7.