css - 左右的框阴影不起作用

我想在左侧和右侧制作框阴影，但是在框顶部始终有阴影，我已经检查了很多遍代码。

#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>

最佳答案

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

关于css - 左右的框阴影不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44549054/