2

幅の異なる 2 つの div の周りに CSS のボックス シャドウを配置し、真下の画像のようにシームレスに見えるように、重なり合ったシャドウを何とか非表示にしようとしています。

ここに画像の説明を入力ここに画像の説明を入力

最初の要素に白い境界線を追加して、2 番目の要素に拡張しようとしましたが、境界線がボックス シャドウの内側に表示されます。また、コンテナにボックス シャドウを配置しようとしましたが、探しているものではない四角形のシャドウになります。この効果を得る方法はありますか？

私の試み: 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>

4

1 に答える 1