Box-shadow ne fonctionne pas avec marge négative

Question

Je travaille sur un design de carte qui nécessite une ombre portée sur ce que l'on pourrait appeler une "forme composée". Fondamentalement, j'ai appliqué la boîte-ombre à la balise parent et à l'intérieur de cette balise j'ai une image plus petite avec une marge négative qui chevauche le haut du conteneur parent.

Mon objectif est d'appliquer la même ombre aux deux objets afin qu'ils semblent être une "forme composée". Est-ce qu'il y a un moyen de faire ça? Voici l'approche que j'ai pris jusqu'à présent:

https://jsfiddle.net/e_video/bza0mchc/

HTML:

<section> 
    <div>Image</div> 
</section> 

CSS:

section { 
    margin: 95px 20px 20px 20px; 
    background-color: #FDFDFD; 
    display: inline-block; 
    width: 340px; 
    height: 400px; 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 2px rgba(0, 0, 0, 0.15); 
} 

div { 
    width: 300px; 
    height: 250px; 
    margin: -75px auto 0 auto; 
    display: block; 
    background: salmon; 
} 

Answer 1

DEMO

nous pouvons faire un élément pseudo et donner il ombre et par z-index pousser en dessous de la section

pour ajouter css

div:before { 
    content: ""; 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 2px rgba(0, 0, 0, 0.15); 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    z-index: -1; 
} 

et position: relative-div de telle sorte que l'élément pseudo positionné absolu est placé WRT div

div { 
    width: 300px; 
    height: 250px; 
    margin: -75px auto 0 auto; 
    display: block; 
    background: salmon; 
    position:relative /* add this as well */ 
} 

Answer 2

je mettrais une autre div dans la div que vous avez déjà.

Ajoutez position:relative; au style div original.

Puis ajouter

width:100%; 
height:100%; 
position:absolute; 
top:75px; 
z-index:-1; 
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 2px rgba(0, 0, 0, 0.15); 

au style de la nouvelle div.