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

Question

我正在尝试在两个不同宽度的 div 周围放置一个 CSS 盒子阴影，并以某种方式隐藏中间的重叠阴影，以获得像右下方图像一样的无缝外观。

我尝试在第一个元素上添加一个白色边框并让它在第二个元素上展开，但边框出现在盒子阴影内。我也尝试在容器上放置一个盒子阴影，但它使阴影变成正方形，这不是我想要的。有什么办法可以达到这种效果吗？

我的尝试：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>