2

これが、シャドウを適用しているボックスのコードです。

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 CodeStructureとSeoIntegratedの3つのボックスはすべて、このボックスシャドウプロパティを備えていますが、下部には表示されません。

画像

4

2 に答える 2

0

これらのグループ化された要素の周りに、サイズ制限が適用されている可能性のあるバウンディング ボックスがあり、その最後の要素の下部にあるボックス シャドウが何らかの形で切り取られていますか?

フロートをクリアしようとしましたか？

デモ: 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>

于 2012-11-19T18:49:59.813 に答える