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

Question

我的目标是在a的左侧和右侧添加一个投影#container div,宽度为960px.

它#container本身包含标题,导航菜单,主要内容,侧边栏和脚.但#container由于图形,标题本身突出了自定义宽度.

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

为了更好的可视化,我的网站看起来类似于http://www.doubleyourdating.com/,但标题元素在两侧突出.

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

1. 我想了一张1px高,1010像素宽的图像,它的两端有25px的"淡入淡出".我把它作为CSS #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;

当然,乱七八糟的价值直到它适合你.