web-dev-qa-db-fra.com

Shadow ne se présente pas

J'essaye de placer des ombres dans l'une des div et ça ne se montre pas. Voici une division où j'essaie d'implémenter l'ombre:

#intro {
    padding: 0px;
    margin: 0px auto;
    width: 100%;
    float:inherit;
    overflow: hidden;
    height: 800px;
    position:inherit;
    background-color: #00b3e1;; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

Voici l'URL: http://rachelchaikof.com/awareness/

cssshadowcss3
19
user1869585

S'il vous plaît voir la réponse de Chris Herbert ci-dessous pour la solution correcte

Réponse précédente:

pour le support en chrome, moz, safari:

-moz-box-shadow:0 0 8px 0 black;
-webkit-box-shadow:0 0 8px 0 black;
box-shadow:0 0 8px 0 black;

le support est beaucoup plus compliqué, voir:

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#33000000');
5
Justin McDonald

La raison pour laquelle vous ne pouvez pas voir l'ombre est due au fait que la prochaine div (#one) se trouve juste en dessous, et que l'ombre s'affiche en dessous de #one. Supprimez l'image d'arrière-plan de #one et l'ombre devient visible.

Ajoutez ceci au CSS de # intro pour rendre l'ombre visible:

position: relative;
z-index: 10;

Si vous souhaitez que les ombres soient visibles sur les autres zones de texte, vous devez également ajuster leurs valeurs d'indice z, l'élément supérieur (#intro) ayant la valeur la plus élevée.

96
Chris Herbert

Un autre scénario que j'ai eu aujourd'hui. Box-shadow n'apparaissait pas malgré la position par rapport à la div. Apparemment, il n'y avait pas de contenu à côté de cette div qui avait la boîte d'ombre. 

Une fois le contenu ajouté, box-shadow est apparu. 

0
Pavithra Olety