웹 페이지를 개발하면서 박스 섀도우 기능을 사용하여 문제를 발견했습니다.CSS3의 박스 섀도우 문제
머리글, 탐색, 내용 및 바닥 글이 포함 된 내 웹 페이지의 전체 래퍼에 상자 그림자를 추가하고 싶습니다.
탐색 및 콘텐츠가 나란히 배치되어 있습니다.
문제 I가 #wrapper에 상자 그림자를 추가하면 I가 here
I를 가진면 소자의 측면을 이용하여 문제를 해결할 수 있었다 재현 같이, 단지 헤더에 나타나는이며 디스플레이 : 테이블 셀 적합성,하지만 페이지의 나머지 부분을 망 쳤어, 그래서 내가 어떻게이 문제를 해결할 수 있는지 묻고있다. 왼쪽에 요소를 떠 있기 때문에
이 래퍼에 overflow:hidden를 추가합니다. 컨테이너가 강제로 떠 다니는 요소를 감쌀 것입니다. 추가 마크 업을 추가 할 필요없이
[편집] ... 대신에 당신은 단순히 동일한 크기와 위치에 또 다른 분리하고 그것을 상자 그림자를 줄 수있는 래퍼의
감사합니다! 잘 했어! – Th3Alchemist
. 높이를 원하는대로 변경하십시오. 음영 처리 할 내용의 높이를 파악하십시오.
<style>
div.shadow {
width: 400px;
height: 100%;
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999;
}
</style>
<body>
<div class="shadow></div>
<!-- everything else here-->
수하물을 청소해야합니다. 공간을 차지하지 않습니다. – TheZ