左右两侧的盒子阴影答案

【问题标题】：box shadow to left and right side左右两侧的盒子阴影
【发布时间】：2017-02-17 02:47:04
【问题描述】：

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

【问题讨论】：

您正在寻找box-shadow CSS 属性。您可以通过在它们之间使用逗号来设置多个框阴影。

【解决方案1】：

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

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

所以这绝对是一个很好的问题。我玩过，至少能够想出正确解决方案的垫脚石。我一直在使用前面提到的 box-shadow 方法，但已将其添加到 :after 和 :before 伪选择器中。

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

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

它肯定需要根据你的需要进行调整，因为它有点老套。但我认为这为如何解决这个问题提供了一些想法。

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

【讨论】：

我也摆弄过::before 和::after 选择器，这确实是一个非常巧妙的问题。话虽如此，如果我是 OP，我可能会选择你的答案。
@phpLover - 你有没有得到这个答案？回顾我以前的答案时，我不断遇到这个问题。

【解决方案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>

【讨论】：

但我的要求不同...请仔细看这张图片
向我解释它有什么不同，还请注意我是非常色盲，所以你越具体越好。
好的..实际上阴影应该只在左侧和右侧。我在两侧都标记了一个点，直到那个点我需要从底部阴影，并且阴影从大约 10% 开始底部。
请记住这是一个非常普遍的情况。打开代码 sn-p 并随意摆弄这些值。还要查找我链接的文档。

【解决方案3】：

使用此示例 CSS3 drop shadow

【讨论】：