消除不同宽度的两个相邻元素之间的盒子阴影

Question

我正试图在两个不同宽度的div上放置一个CSS box-shadow，并以某种方式隐藏中间的重叠阴影，使其看起来像右下方的图像。

我尝试在第一个元素上添加一个白色边框，然后让它在第二个元素上展开，但边框显示在box-shadow内。我也试过在容器上放一个盒子阴影，但它使阴影方块不是我想要的。有没有办法达到这个效果？

我的尝试：http://jsfiddle.net/1vy2q4L0/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
div {
  font-family: 'Open Sans';
  background-color: ;
  display: inline-block;
  float: left;
  padding: 10px;
  padding-bottom: 0px;
  box-shadow: 0px 0px 3px 0px black;
}
ul {
  list-style-type: none;
  margin: 0px;
  padding: 10px;
}
li {
  margin-bottom: 10px;
}
a {
  color: black;
  text-decoration: none;
}
.menu-sub {
  clear: both;
  padding: 0px;
}
.container {
  margin: 25px;
  box-shadow: none;
}

<div class="container">
  <div class="menu-top">Research</div>
  <div class="menu-sub">
    <ul>
      <li><a href="#">Research Services</a></li>
      <li><a href="#">Research Portfolio</a></li>
      <li><a href="#">Map of Current Projects</a></li>
    </ul>
  </div>
</div>

Answer 1

我有一个简单的解决方案。 CSS在注释中解释。

/*
 * reset
 */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*
 * float to shrink-wrap
 * position relative to make z-index work
 * z-index to force the white background + border in "front" of sub menu
 * background + border bottom to cover the box shadow of menu and sub menu
 * negative margin to reclaim the space occupied by the border
 */
.menu-top {
  float: left;
  box-shadow: 0 0 3px black;
}
.menu-top span {
  display: block;
  position: relative;
  z-index: 1;
  background-color: white;
  border-bottom: 5px solid white;
  margin-bottom: -5px;
  padding: 10px;
}

/*
 * clear to force new line
 */
.menu-sub {
  float: left;
  clear: left;
  box-shadow: 0 0 3px black;
}
.menu-sub ul {
  padding: 10px;
}

<div class="container">
  <div class="menu-top"><span>Research</span></div>
  <div class="menu-sub">
    <ul>
      <li><a href="#">Research Services</a></li>
      <li><a href="#">Research Portfolio</a></li>
      <li><a href="#">Map of Current Projects</a></li>
    </ul>
  </div>
</div>