div의 4면 중 3면에 박스 섀도우가 있습니다.

Question

두 개의 div가 서로 겹쳐 있으며, 둘 모두를 둘러싼 그림자가 필요합니다. div에 2 개의 div를 감쌀 수 없습니다.

상단 div의 위쪽, 왼쪽 및 오른쪽에만 그림자가 있고 아래쪽 div의 아래쪽, 왼쪽 및 오른쪽에만 그림자가있을 수 있습니까? 정말 요소 자체 뒤에 큰 흐릿 블록의로

#topDiv, #bottomDiv 
{ 
    box-shadow: 2px 2px 10px 5px #909090; 
    -webkit-box-shadow: 2px 2px 10px 5px #909090; 
    -moz-box-shadow: 2px 2px 10px 5px #909090; 
} 

Answer 1

당신은 단지 세 가지 측면을 렌더링 할 수 없습니다 -

는 지금은 다음있다. 내가 가짜로 발견 한 가장 좋은 방법은 단순히 Y 축 방향으로 더 멀리 이동시키고 모양이 좋을 때까지 값을 조정하는 것입니다.

는 또한 ::before와 ::after 실험 및 상자 그림자를 전달하는 2/3-높이 의사 요소를 만드는 시도, 그러나 다시, 그것은 해킹, 그것은 좋은보고 조정이 필요한 것입니다 수 있습니다.

Answer 2

당신은이 div의 절대 위치 할 수 있습니다 클립으로 작업을 수행 할 수 있습니다

#topDiv, #bottomDiv 
{ 
    box-shadow: 2px 2px 10px 5px #909090; 
    -webkit-box-shadow: 2px 2px 10px 5px #909090; 
    -moz-box-shadow: 2px 2px 10px 5px #909090; 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    background-color: lightyellow; 
    border: solid 1px red; 
} 

#topDiv { 
    left: 15px; 
    top: 10px; 
    clip: rect(0px, 120px, 150px, -10px); 
} 

#bottomDiv { 
    left: 150px; 
    top: 10px; 
    clip: rect(-10px, 120px, 102px, -10px); 
} 

demo