两个带阴影的div看起来像一个部分.CSS中有可能吗？

Question

我有两个div,彼此相邻,背景颜色为白色.http://jsfiddle.net/J5ZXt/是代码的链接.我希望两个div看起来像一个元素,所以我需要删除一部分阴影.有任何想法吗？

Answer 1

对的,这是可能的.只需用以下内容覆盖:before:

/* Add relative positioning */
#two {
  position:relative;
}
/* Add :before element to cover up shadow */
#two:before {
  background:white;
  display:block;
  content:".";
  font-size:0;
  width:4px;
  height:100px;
  position:absolute;
  left:-4px;
  top:0;
}

/* Existing styles */
#one {
  width: 100px;
  height: 100px;
  background: #FFF;
  -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  float:left;
}
#two {
  width: 100px;
  height: 300px;
  background: #FFF;
  -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  float:left;
}

<div id="one"></div>
<div id="two"></div>

Answer 2

这是我能在几分钟内获得的最好成绩,我认为它能胜任.最好的是它的简单性(只有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,0,0.3);
    -webkit-box-shadow: -4px 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: -4px 0px 3px 1px rgba(0,0,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,0,0.3);
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    float:left;
    z-index: 5;
    position: relative;
}