Question

我遇到一个问题，我需要两个div的盒子阴影扩展到容器外面。这工作正常，但是当使用框阴影时，它似乎从2个div的右侧删除了一个部分。

如下所示：

.wrapper {
  margin: 30px 200px;
  background: blue;
  height: 300px;
}
.test1 {
  width: 100%;
  background: #eee;
  box-shadow: -200px 0 0 0 #eee;
}
.test2 {
  width: 100%;
  background-color: red;
  box-shadow: -200px 0 0 0 red;
}

<div class="wrapper">
  <div class="test1">TEST1</div>
  <div class="test2">TEST2</div>
</div>

红色和灰色应该一直持续到容器的边缘，但正如您所看到的那样，容器正在显示（蓝色部分）。

有关如何解决这个问题的想法吗？

Answer 1

试试这个：

HTML：

<div class="wrapper">
<div class="test1">TEST1</div><br/><br/>
<div class="test2">TEST2</div>
</div>

CSS：

.wrapper {
margin: 30px 200px;
background: blue;
height: 300px;
width:550px;
}

.test1 {
width: 100%;
background: #eee;
box-shadow: 0px 5px 0px #333;
margin:0;padding:0;
}

.test2 {
width: 100%;
background: red;
box-shadow: 0px 5px 0px #333;
margin:0;padding:0;
}

希望这会有所帮助。

请参阅http://www.w3schools.com/cssref/css3_pr_box-shadow.asp了解box-shadow属性。

由于

Answer 2

你想要双方都有一些影子......像这样吗？

.test1 {
    width: 100%;
    background: #eee;
    box-shadow: -200px 0 0 0 #eee,  200px 0 0 0 #eee;
}

.test2 {
    width: 100%;
    background-color: red;
    box-shadow: -200px 0 0 0 red,  200px 0 0 0 red;
}

Box-Shadow删除部分div背景

2 个答案: