box-shadow阴影部分的设置
0
悬赏园豆：60
[已解决问题]
解决于 2013-07-31 10:06
刚刚学的 box-shadow，不是很理解。请大家帮个忙，谢谢！！
为什么在我没有设置<table>的颜色时就可以显示出下面的阴影
当我设置了<table>中颜色为白色时，便会出现阴影部分被覆盖的情况。代码如下：
.box {
position:relative;
-webkit-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
padding:10px;
background:#fff;
}
.box img {
border:1px solid #8a4419;
border-style:inset;
}
.box:after {
content:'';
position:absolute;
z-index:-1;
/* 阴影部分 */
-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
width:70%;
left:15%;
height:100px;
bottom:0;
}
<table width="900" height="300" background="gray.png"border="0" align="center"cellpadding="0" cellspacing="30" style="border-bottom:1px dotted gray";>
<tr>
<td width="300" class="box"><img src="koala.jpg" width="240"height="260px" />
</td> <td width="300" class="box"><img src="koala.jpg" width="240"height="260px" />
</td> <td width="300" class="box"><img src="koala.jpg" width="240"height="260px" />
</td></tr>
</table>
最佳答案
0
你给.box加一个属性：“z-index:1; ”，就不怕table背景为白色了。原先的阴影是被table背景给盖住了，table模型还是很特殊的，对子元素td tr的处理上，和div对其子元素的处理还有些区别~
.box { position: relative; -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); padding: 10px; background: #fff; z-index:1; }
收获园豆：60
