CSS Shadow 获取所有 div 底部宽度？

Question

我想要一个框 BOTTOM 阴影来获得所有 div #menu 宽度，但阴影让左右边距...我应该改变什么来获得没有该边距的完整 #menu 底部阴影？

#menu{
  width:500px;
  height:50px;
  background-color:red;
   box-shadow: 0 6px 2px -2px #555;
}

https://jsfiddle.net/c6zkLngz/

谢谢朋友们！

Answer 1

box-shadow 的语法是：(MDN)

/* offset-x | offset-y | blur-radius | spread-radius | color */

您将展开半径设置为 -2px。如果您将其重置为 0，您将获得全宽的 box-shadow。

#menu{
  width:500px;
  height:50px;
  background-color:red;
   box-shadow: 0 6px 2px 0 #555;
}

#menu {
  width: 500px;
  height: 50px;
  background-color: red;
  box-shadow: 0 6px 2px 0 #555;
}

<div id=menu></div>

如有必要，您可以调整模糊半径...类似于this。

---

或者，（并且仅在可行的情况下）您可以在元素上敲击左右白色边框...类似于this

#menu {
  width: 500px;
  height: 50px;
  background-color: red;
  box-shadow: 0px 6px 2px -2px #555;
  box-sizing: border-box;
  border-left: 1.8px solid white;
  border-right: 1.8px solid white;
}

<div id=menu></div>