CSS - 섀도우가 다른 요소를 오버레이합니다.

-2

div가 거의없고 그림자가 하나씩 있지만 div의 그림자는 항상 다음 div를 덮어 씁니다. HTML : 여기 CSS - 섀도우가 다른 요소를 오버레이합니다.

내 코드입니다

<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; 
}

바이올린 : https://jsfiddle.net/kc98heaw/

: 나는 그런하지만 용기없는 무언가를 달성 할 https://jsfiddle.net/81t4v4a5/

그게 맞습니까? 가능한?

출처

2016-08-15 Pachu

그것은 당신이 달성 하려는지 명확하지 않다. 컨테이너가 상자 모델의 큰 부분 일 때 컨테이너를 사용하는 것에 대해 왜 싫어합니까? 왜 하나의 부모 div에만 스타일을 원한다면 각 div div의 텍스트 줄은 무엇입니까? 두 번째 바이올린을 당신이 원하는 버전과 연결 시켰습니까? – leigero

두 번째 링크는 contaienr을 사용하지 않고도 달성하고자하는 것이므로 모든 div가 컨테이너에 래핑 된 경우 캔트를 적용하려는 일부 다른 동작이 있기 때문에 – Pachu

이 무엇입니까?

바이올린 : 나는 식으로 그림자를 모든 div의 반복과 그릴려고 https://jsfiddle.net/y6097xso/

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>

출처

2016-08-15 18:13:12 AlliaS

거의 그림자가 보이지 않습니다. 두 번째 아이, 당신이 그곳에서 한 일을 expain 수 있습니까? – Pachu

네, 죄송합니다. 그림자가 좀 엉망 이군,이게 더 좋은가요? – AlliaS

https://jsfiddle.net/y6097xso/ – AlliaS

CSS - 섀도우가 다른 요소를 오버레이합니다.

답변

관련 문제