如何防止CSS box-shadow上的角落？

Question

我正在尝试向屏幕宽度为100％的标题栏添加底部box-shadow。然而，我最终会看到圆角，如图所示：

如何扩展阴影，使其两侧都没有明显的角落？

JSFiddle Here

Answer 1

给box-shadow a 水平偏移为零，垂直偏移为零，模糊半径为4px以软化它和4px的展开半径以增加其大小。最后给它一个 colo [u] r 。阴影本身实际上是在元素周围 - 我们只是看不到它溢出页面的位置。

#shadow {
    top:0;
    background-color: #3D668F;
    height: 50px;
    width: 100%;
    -webkit-box-shadow: 0 0px 4px 4px #232323;
    -moz-box-shadow: 0 0px 4px 4px #232323;
    box-shadow: 0 0px 4px 4px #232323;    
}

Demo jsFiddle