为什么Bootstrap导航栏底部的阴影在开始和结束时都会切断

Question

我在导航栏底部应用的方框阴影在开始和结束处短暂缩短。

CSS

-webkit-box-shadow: 0 8px 8px -8px rgba(0,0,0,.2);
box-shadow: 0 8px 8px -8px rgba(0,0,0,.2);

使用Bootply更新： http://www.bootply.com/WgAVhmb8ql

Answer 1

由-8px引起的，这是＆＃34;传播＆＃34;的价值。 - 你告诉阴影以负数传播，所以它基本上从边缘缩回。

来自http://www.w3.org/TR/css3-background/#box-shadow

  

指定 展开距离 。正值会导致阴影   按指定的半径向所有方向展开。负值   使影子收缩。

尝试删除负片差并使用阴影中的其他值进行播放，例如

-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2);
box-shadow: 0 3px 3px rgba(0,0,0,.2);

http://www.bootply.com/t7qfN7Wk3w