左右框阴影不起作用

Question

我想在左右两边做box-shadow，但是box的顶部总是有阴影，我检查了很多次我的代码。

#box {
  margin: 0 auto;
  margin-top: 0px;
  border: 1px solid #ffffff;
  border-top-color: #e99f2e;
  overflow: hidden;
  box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f;
}

<div id="box"></div>

Answer 1

首先了解box-shadow 的syntax，然后在您规划设计时轻松在任何一侧应用box-shadow，

syntax -
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color

#box {
  margin: 0 auto;
  margin-top: 0px;
  overflow: hidden;
  box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f;
  height: 150px;
  width: 50%;
  background:#cff;
  margin-top:20px;
}

<div id="box"></div>

Answer 2

实际上有一个 hack。

您可以通过添加“空”的顶部和底部阴影来实现此目的。

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(30, 53, 125, 0.9), -12px 0 15px -4px rgba(30, 53, 125, 0.9);

Answer 3

我认为这不如其他答案好，但这是使用带有阴影的绝对定位伪元素的另一种方法。

.lr-shadow {
  background:#fff;
  border: 1px solid #fff;
  border-top-color: #e99f2e;
  width:100%;
  max-width:500px;
  height:200px;
  position:relative;
  margin:0 auto;
}
.lr-shadow:before, .lr-shadow:after {
  box-shadow: 0 0 20px 2px #7f7e7f;
  content:" ";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:90%;
  z-index:-1;
}
.lr-shadow:before {
  left:5px;
}
.lr-shadow:after {
  right:5px;
}

<div class="lr-shadow"></div>

Answer 4

如果将spread设置为blur参数的负数，就可以达到这个效果。对于左框阴影，将position 设置为负blur，将右框阴影position 设置为正blur。我在这个演示中使用了20px：

#box {
  margin: 0 auto;
  margin-top: 40px;
  border: 1px solid #ffffff;
  border-top-color: #e99f2e;
  overflow: hidden;
  width: 150px;
  height: 150px;
  box-shadow: 20px 0px 20px -20px #7f7e7f, -20px 0px 20px -20px #7f7e7f;
}

<div id="box"></div>

查看this CSS Box-shadow generator 以进一步探索。