css - 左右框阴影不起作用

Question

我想在左侧和右侧制作盒子阴影，但是盒子顶部总是有阴影，我已经检查了我的代码很多次。

#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 的语法，然后根据您的设计计划在任何一侧应用 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>