상자 그림자의 높이와 너비를 별도로 설정합니까?

Question

동적 인 양의 내용을 담고있는 div를 생성해야합니다. 상단과 하단에는 상자 그림자가 있습니다. 또한 측면의 그림자가 급격하게 div 아래로 약간 나타나야하며 특정 영역의 그늘을 어둡게하는 그림자가 서로 겹치지 않아야합니다. 여기
예 :
http://jsfiddle.net/EdwardG_Jones/WC2ja/2/ : 그라데이션 페이드 나는 오히려 점진적 하나를 즉시 전환, 그러나 그것은 모서리를 커버하지 않는, 작동하지 않은 다음과 같은 방법을 시도했습니다
http://jsfiddle.net/EdwardG_Jones/TBfWm/

box-shadow: 12px 5px 5px -10px rgba(50, 50, 50, 0.75), -12px 5px 5px -10px rgba(50, 50, 50, 0.75), 0 7px 5px -5px rgba(50, 50, 50, 0.75); 

은 아마 바닥 기울기에 대한 이미지를 사용하여 결국 어떻게 든 컨텐츠를 숨기지 않고 숨길 상단의 그림자 위에 앉아 다른 사업부를 만듭니다. 내가 어떻게해야할지 모르겠다. 특히 drupal에서 div를 수동으로 하드 코딩하는 것이 더 어렵다는 것을 의미합니다.

Answer 1

또는 아래쪽, 왼쪽 및 오른쪽 테두리를 올바르게 표시 한 다음이 해킹 코드가있는 위쪽 테두리를 숨기려면 무엇이든하십시오.

div{ 
    margin: 20px; 
    width: 200px; 
    height: 400px; 
    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75) 
} 
div:before{ 
    content: ""; 
    width: 200px; 
    height: 5px; 
    background: white; 
    position: absolute; 
    margin-top: -6px; 
} 

Fiddle.

그런 다음 실제로 사용하는 것에 대해 유감을 느낍니다.