箱子阴影到左侧和右侧

Question

我想在div的左侧和右侧添加盒子阴影，这里我附上了一张图片，我不知道怎么做，有人可以帮我吗？请注意，阴影应该是左右点的标记。

Answer 1

＆＃13;

＆＃13;

body {
  background-color: red;
}

.boxWrapper {
  height: 100%;
  overflow: hidden;
  margin: 30px auto;
  width: 500px;
  padding: 0 60px;
}

.box {
  position: relative;
  border-radius: 3px;
  padding: 20px;
  min-height: 300px;
  background-color: #fff;
}

.box:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: -20px;
  transform: rotate(-8deg);
  left: 20px;
  background-color: transparent;
    box-shadow: -40px 0 30px rgba(0, 0, 0, 0.3);
}

.box:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: -20px;
  transform: rotate(8deg);
  right: 20px;
  background-color: transparent;
    box-shadow: 40px 0 20px rgba(0, 0, 0, 0.3);
}

＆＃13;

<div class="boxWrapper">
  <div class="box">
    box
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

所以这绝对是个问题。我已经玩过了，至少能够找到合适解决方案的垫脚石。我一直在使用已提到的box-shadow方法，但已将其添加到:after和:before伪选择器。

然后，我将这两个选择器旋转了8度（只是模仿你提供的图像），发现它仍然在元素上方和元素下方显示一些不需要的阴影。

为了解决这个问题，我用一个盒子包装盒包装盒子，其唯一目的是定义盒子的大小以及隐藏顶部和底部溢出的任何东西。

它肯定需要适应你的需要，因为它有点像hacky。但我认为这提供了一些如何解决问题的想法。

我已经创建了一个Codepen，因此您可以在工作中看到它。 http://codepen.io/RyanAaronGreen/pen/Kagdad

Answer 2

希望这能满足您的需求。 box-shadow媒体资源的文档位于Here on MDN。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  background-color: pink;
  height: 100%;
  padding: 10px;
}
.content {
  width: 85%;
  margin: 0 auto;
  box-sizing: border-box;
  height: calc(100% - 10px);
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3), 5px 5px 5px rgba(0, 0, 0, 0.3);
  background-color: white;
}

<div class="container">
  <div class="content">
    Hello
  </div>
</div>

Answer 3

使用此样本 CSS3 drop shadow