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 */

您将spread-radius设置为-2px。如果将其重置为0，则会在整个宽度上获得框阴影。

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

＆＃13;

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

＆＃13;

<div id=menu></div>

＆＃13;

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

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

＆＃13;

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

＆＃13;

<div id=menu></div>

＆＃13;

CSS Shadow得到所有div底部宽度？

1 个答案: