Css - l'ombre recouvre d'autres éléments

Question

J'ai peu de div et chacun d'eux a une ombre, mais l'ombre d'un div recouvre toujours la div suivante.

voici mon code: html:

<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 

css:

div { 
    background-color:white; 
    text-align:center; 
    box-shadow: 0 0 3px 5px black; 
} 

violon: https://jsfiddle.net/81t4v4a5/

Je veux accomplir quelque chose comme ça, mais sans récipient: https://jsfiddle.net/kc98heaw/

Est-ce que c'est possible?

Answer 1

c'est ce que vous cherchez?

violon: https://jsfiddle.net/y6097xso/

J'ai essayé de parcourir tous les divs et dessiner l'ombre avec une expression:

div { 
 
    background-color:white; 
 
    text-align:center; 
 
    box-shadow: 0 0 3px 5px black; 
 
} 
 
div:nth-child(2n){ 
 
    position: relative; 
 
    box-shadow: 9px 0 4px -4px black, -9px 0 4px -4px black; 
 
}

<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div>