解决方法
这是我能在几分钟内得到的最好的,我认为它能完成这项工作.最好的是它的简单性(只有3次编辑你的CSS)
定位D1的阴影,使右边缘具有负值(-4px足以隐藏它)
给两个div相对定位,这样我们就可以控制它们的堆叠顺序.
给D1一个比D2更高的z指数,因此它掩盖了D2阴影的顶部.
#one {
width: 100px;
height: 100px;
background: #FFF;
-moz-Box-shadow: -4px 0 3px 1px rgba(0,0.3);
-webkit-Box-shadow: -4px 0 3px 1px rgba(0,0.3);
Box-shadow: -4px 0px 3px 1px rgba(0,0.3);
float:left;
position: relative;
z-index: 20;
}
#two {
width: 100px;
height: 300px;
background: #FFF;
-moz-Box-shadow: 0 0 3px 1px rgba(0,0.3);
-webkit-Box-shadow: 0 0 3px 1px rgba(0,0.3);
Box-shadow: 0 0 3px 1px rgba(0,0.3);
float:left;
z-index: 5;
position: relative;
}
