Css3 상자 그림자 속성이 하단을 제외한 모든면에 표시됩니다.

Question

다음은 그림자를 적용 할 상자의 코드입니다.

width: 295px; 
max-width:90%; 
height: auto; 
padding-bottom:20px; 
float:left; 
text-align:center; 
margin-left:10px; 
margin-top:50px; 
background-color: white; 
-webkit-box-shadow: 0px 0px 5px #CCC; 
box-shadow: 0px 0px 5px #CCC; 
-moz-box-shadow: 0px 0px 5px #CCC; 
position:relative; 

아름다운 디자인 유효 코드 구조와 서 통합 된 3 개의 상자는 모두 상자 그림자 속성을 가지고 있지만 하단에는 나타나지 않습니다.

Answer 1

어떻게 든 마지막 요소의 하단에있는 상자 그림자를 절단에 적용된 크기 제한이있을 수 있습니다 이러한 그룹화 요소 주위에 경계 상자가 있습니까?

플로트 삭제를 시도 했습니까?

데모 : http://jsfiddle.net/uriahjamesgd_73/5fQPV/

<!-- HTML --> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 

<div class="box clear"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div>​ 

/* CSS */ 
.box { 
    position:relative; 
    width: 75px; 
    max-width:90%; 
    height: 75px; 
    padding:0 0 20px 0; 
    float:left; 
    text-align:center; 
    margin: 10px 0 0 10px; 
    background-color: white; 
    -webkit-box-shadow: 0px 0px 5px #CCC; 
    -moz-box-shadow: 0px 0px 5px #CCC; 
    box-shadow: 0px 0px 5px #CCC; 
} 
.clear { 
    clear:left; 
} 

Answer 2

그것은 문제가 보인다는 박스 그림자 속성입니다.

이 시도 : 더 실험

.box{ 
width: 295px; 
max-width:90%; 
height: auto; 
padding-bottom:20px; 
float:left; 
text-align:center; 
margin-left:10px; 
margin-top:50px; 
background-color: white; 
-webkit-box-shadow: 0px 0px 5px 2px #ccc; 
-moz-box-shadow: 0px 0px 5px 2px #ccc; 
box-shadow: 0px 0px 5px 2px #ccc; 
position:relative; 
} 

체크 아웃 this 링크를.

여전히 작동하지 않는 경우 일부 요소처럼 크기 제한이 적용되어 마지막 요소 아래쪽의 상자 그림자가 잘리는 것처럼 보일 수 있습니다.

도움이 되길 바랍니다. :)