18

#container div我的目标是在960px 宽的左侧和右侧添加阴影。

#container本身包含标题、导航菜单、主要内容、侧边栏和脚。但是标题本身#container由于图形而具有自定义宽度。

因此,它不会在其左右添加阴影。只有向下的导航菜单需要下拉菜单。这是因为标题设置为自定义宽度,并超出#container自身。已经突出的东西的左右两侧的阴影会破坏美学。

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

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

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

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

我该如何进行这项工作?

4

2 回答 2

41

你可以尝试这样的事情:

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

当然,在它适合你之前,乱搞这些值。

于 2011-04-03T19:54:28.240 回答
-2

单行代码:

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

只需插入相应的css样式元素即可!

于 2013-06-28T10:59:49.720 回答