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

Question

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

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

https://jsfiddle.net/c6zkLngz/

谢谢 friend 们!

Answer 1

box-shadow 的语法是:( MDN )

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

您正在将展开半径设置为 -2 像素。如果您将其重置为 0，您将获得全宽的框阴影。

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