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

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

你试过清理你的浮动吗？

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

​</p>

Answer 2

看来问题出在您的 box-shadow 属性上。

尝试这个：

.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;
}

查看此链接以获取更多实验。

如果它仍然不起作用，看起来某些元素可能应用了大小限制，以某种方式切断了最后一个元素底部的框阴影。

希望能帮助到你 ：）