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);)

这基本上有效，但影子在他们见面时间隙很小。我似乎无法掌握如何摆脱这种情况，而且我不太了解谷歌发现的答案。

这是一个完整的HTML＆amp; CSS

差距在右侧。

https://jsfiddle.net/w3kfw0wn/

头像是一张照片，所以不要介意它没有边框。

任何帮助都将不胜感激。

Answer 1

正如andib所建议的，最好的解决方案是重新排列布局，并获得单个阴影

内容在标题下方扩展，所有阴影都在其上

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

非常简单，首先你需要理解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);

两个元素之间的CSS阴影中的差距

2 个答案: