仅在左侧和右侧制作带阴影的<div> </div>

Question

我的目标是在#container div的左侧和右侧添加一个投影，宽度为960像素。

#container本身包含标题，导航菜单，主要内容，侧边栏和英尺。但由于图形原因，标题本身突出了#container的自定义宽度。

因此，它的右侧和左侧没有添加投影。只有向下导航菜单才需要删除。这是因为标头设置为自定义宽度，并且突出超出#container本身。已经突然出现的东西左右两侧的阴影将破坏美学。

为了更好地进行可视化，我的网站看起来与http://www.doubleyourdating.com/类似，但标题元素在两边突出。

我尝试使用以下解决方案从导航菜单中向#container的左侧和右侧添加投影：

1. 我拍了一张1px高，1010像素宽的图像，在相反的两端包含25px的“淡入淡出”。我将其视为#container div background-image，但是，可能因为#container本身设置为960px宽，1010px宽的背景无法显示。请注意，更改960px宽度将在这个简单的2列布局中创建一连串的死亡。

2. 我尝试在容器div周围拼凑一个临时阴影框div，但这不起作用，因为我的标题有一个比容器更宽的自定义宽度。

我如何使这项工作？

Answer 1

您可以尝试这样的事情：

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

当然，mess around with the values直到它适合你。

Answer 2

单行代码：

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

只需插入相应的css样式元素即可 完成！