两个元素之间的 CSS 阴影间隙

Question

作为警告，我不太习惯使用 html 和 css。但是我必须帮一个朋友处理。

我有两个 div 彼此重叠，想要为它们添加一个框阴影。

<div id="div_1></div>
<div id="div_2></div>

和 css

#div_1 { box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);)
#div_2 { box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);)

这基本上奏效了，但是阴影在它们相遇的地方有一个小缝隙。我似乎无法掌握如何摆脱它，我也不太理解我在 google.

中找到的答案

这是一个 fiddle 完整的 HTML & CSS

缺口在右边

https://jsfiddle.net/w3kfw0wn/

头像是图片，没有边框的不用介意。

如有任何帮助，我们将不胜感激。

Answer 1

很简单，首先你要了解box-shadow。

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

您正在将 blur 设置为 5px，这意味着透明和您的颜色之间需要有一个渐变。

因此，要去除白色部分，请将模糊设置为 0。

box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.75);

Answer 2

按照andib的建议，最好的解决办法是重新排列布局，得到一个单一的阴影

内容在header下方延伸，所有阴影都在

#navigation {
  width: 178px;
  height: 150px;
  float: left;
  clear: both;
  background-color: #b5ebb9;
  border-bottom-left-radius: 15px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-style: solid;
  border-color: #000;
  border-right-width: 0px;
  border-top-width: 0px;

}

#wrapper {
  width: 865px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

#content {
  width: 636px;
  height: 100%;
  float: right;
  padding: 15px;
  text-align: justify;
  padding-top: 10px;
  background-color: #FFF;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-left-width: 2px;
  border-right-width: 2px;
  border-top-width: 0px;
  border-bottom-width: 2px;
  border-color: #000;
  border-style: solid;
  display: block;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  margin-right: 15px;
  margin-bottom: 15px;
      padding-top: 107px;
    margin-top: -107px;
    border-radius: 15px;
}

#head {
  width: 850px;
  height: 110px;
  background-color: #699;
  border-top-left-radius: 50px 50px;
  border-top-right-radius: 10px;
  z-index: 10;
  position: relative;
}

.menu li {
  list-style-type: none;
  display: block;
  margin-left: -20px;
}

  <div id="wrapper">
    <div id="head"></div>
    <div id="navigation">
      <ul class="menu">
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
        <li><a href="index.php?s=home">Menu1</a>
        </li>
      </ul>
    </div>
    <div id="content">
      #content#
      <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>

两个元素之间的 CSS 阴影间隙

Gap in CSS shadows between two elements

html

css

box-shadow