左右框阴影不起作用

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

实际上有一个黑客。

您可以通过添加 "empty" 顶部和底部阴影来实现。

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 2

如果将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 进一步探索。

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

首先了解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>

左右框阴影不起作用

box shadow to left and right doesn't work

css

box-shadow