html - Css3 Box-shadow 属性出现在除底部以外的所有侧面

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;

Beautiful Design Valid Code Structure和Seo Integrated这3个盒子都有这个box-shadow属性，但是没有出现在底部。

Answer 1

这些分组元素周围是否有一个边界框可能应用了大小限制，以某种方式切断了最后一个元素底部的框阴影？

您尝试过清除 float 吗？

演示: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;
}