Css 制作一个<；部门>；仅在左右两侧有阴影

我的目标是在960px宽的

#container div

的左侧和右侧添加一个阴影

#容器

本身包含标题、导航菜单、主要内容、侧栏和底部。但是，由于图形的原因，标题本身以自定义宽度伸出

#容器

因此，它不会在其左右两侧添加阴影。只有导航菜单下拉菜单需要下拉。这是因为页眉设置为自定义宽度，并突出在
#容器
本身之外。在已经突出的物体的左右两侧投下阴影会破坏美学

为了更好的可视化，我的站点看起来类似于，但标题元素在两侧突出

我尝试使用以下解决方案，从导航菜单向下，在
#容器
的左侧和右侧添加阴影：

我用Photoshop处理了一张1px高、1010px宽的图像，图像两端有一个25px的“淡入”效果。我希望将其作为
#container div背景图像
，但是，可能是因为
#container
本身设置为960px宽，所以无法显示1010px宽的背景。请注意，更改960px的宽度将在这个简单的2列布局中创建一个死亡级联

我试着在容器div的周围创建一个临时的阴影框div，但是这不起作用，因为我的标题有一个自定义的宽度，它比容器的宽度要宽

我怎样才能做到这一点呢？
您可以尝试以下方法：

box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;

当然，除非它适合您。
单行代码：

box-shadow: 4px 0 2px #222,  -4px 0 2px #222; 

只需插入相应的css样式元素
完成了
 “它不起作用”在这里更合适“这都是***这并没有消除顶部和底部阴影，只是减少了它。这不是一个有效的答案。这有点像黑客。它仍然保持着阴影。对于那些真正想实现目标的人来说，这并不能解决问题。@Christephens的代码已经修改。哦，是的，太棒了，这看起来是我真正的答案。我修改了你的小提琴，将其添加到我必须处理的情况中，效果很好：