Question

如何在下面的示例中创建不重叠的框阴影？

因为SO希望我提供更多详细信息：您的目标是为元素.top和.side创建框阴影，而不更改不重叠的标记（如果可能）。

编辑：两个框阴影必须具有模糊半径> 0。

编辑2：“非重叠”意味着在这种情况下两个阴影都不会掉入另一个元素。

编辑3：有关详细说明，请参阅this精彩图片。

代码：

.wrapper-all {
  padding-left: 50px;
}
.wrapper-side {
  margin-left: -50px;
  left: 50px;
}
.top {
  position: relative;
  background-color: #fff;
  height: 20px;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1);
}
h2,
p {
  text-indent: 15px;
}
.side {
  position: fixed;
  width: 50px;
  height: 100%;
  background-color: #fff;
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1);
}

<div class="wrapper-all">
  <div class="wrapper-side">
    <div class="side"></div>
  </div>
  <div class="wrapper-top">
    <div class="top">
      <p>My shadow is overlapping on the left. Not cool.</p>
    </div>
  </div>
  <h2>Have a nice day! :)</h2>
</div>

Answer 1

如果我理解这一点，我认为这就是你想要的？只需删除位置：顶部div的相对..

＆＃13;

.wrapper-all {
  padding-left:50px;
}
.wrapper-side {
  margin-left: -50px;
  left: 50px;
}

.top {

  background-color: #fff;
  height: 20px;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,1);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,1);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,1);
}
h2, p {
  text-indent: 15px;
}
.side {
  position: fixed;
  width: 50px;
  height: 100%;
  background-color: #fff;
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0,0,0,1);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0,0,0,1);
  box-shadow: 5px 0px 5px 0px rgba(0,0,0,1);
}

＆＃13;

<div class="wrapper-all">
  <div class="wrapper-side">
    <div class="side">
    </div>
  </div>
  <div class="wrapper-top">
    <div class="top">
    <p>
    My shadow is overlapping on the left. Not cool.
    </p>
    </div>

＆＃13;

Answer 2

你只需要扩展一个阴影并将模糊作为阴影本身的一部分，因此在模块的另一侧不会看到模糊。为此，您需要定义展开半径（阴影的第4个参数），其中正值会增加阴影的大小，负值会减小尺寸。默认值为0（阴影与模糊大小相同）：

.wrapper-all {
  padding-left:50px;
}
.wrapper-side {
  margin-left: -50px;
  left: 50px;
}

.top {
  position: relative;
  background-color: #fff;
  height: 20px;
  -webkit-box-shadow: 2px 7px 5px -2px rgba(0,0,0,1);
  -moz-box-shadow: 2px 7px 5px -2px rgba(0,0,0,1);
  box-shadow: 2px 7px 5px -2px rgba(0,0,0,1);
}
h2, p {
  text-indent: 15px;
}
.side {
  position: fixed;
  width: 50px;
  height: 100%;
  background-color: #fff;
  -webkit-box-shadow: 7px 2px 5px -2px rgba(0,0,0,1);
  -moz-box-shadow: 7px 2px 5px -2px rgba(0,0,0,1);
  box-shadow: 7px 2px 5px -2px rgba(0,0,0,1);
}

<div class="wrapper-all">
  <div class="wrapper-side">
    <div class="side">
    </div>
  </div>
  <div class="wrapper-top">
    <div class="top">
    <p>
    My shadow is overlapping on the left. Not cool.
    </p>
    </div>
  </div>
  <h2>
   Have a nice day! :)
  </h2>
</div>

Answer 3

我也遇到了这个麻烦，我用这个丑陋的黑客解决了它：

.top {
  box-shadow: 2px 5px 5px 0px rgba(0,0,0,1);
}
.top:after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 5px;
  height: 100%;
  background: #fff; /*same as side bg*/
}

编辑： https://jsfiddle.net/kantoci/25k5z7eq/5/

非重叠角盒阴影

3 个答案: