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

Question

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

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

@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>

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

Eliminate the box shadow between two adjacent elements of different widths

html

css

box-shadow