制作一个仅在左侧和右侧有阴影
我的目标是在宽度为 960 像素的 #container div 的左侧和右侧添加阴影。
#container 本身包含标题、导航菜单、主要内容、侧边栏和页脚。但标头本身由于图形而以自定义宽度突出于#container 之外。
因此，它不会在其右侧和左侧添加阴影。只有向下的导航菜单需要下拉。这是因为标头设置为自定义宽度，并且超出了 #container 本身。已经突出的物体左右两侧的阴影会破坏美观。
为了更好的可视化，我的网站看起来类似于 http://www.doubleyourdating.com/，但标题元素两侧突出。
我尝试使用以下解决方案从导航菜单中向 #container 的左侧和右侧添加阴影：
我用 Photoshop 制作了一个 1 像素高、1010 像素宽的图像图像的两端包含 25 像素的“淡入淡出”。我将其CSS设置为
#container div background-image，但是，可能是因为#container本身设置为960px宽，1010px宽的背景无法显示向上。请注意，更改 960 像素宽度将在这个简单的 2 列布局中创建级联死亡。我尝试在容器 div 周围设置一个临时阴影框 div，但这不起作用，因为我的标头有一个比容器更宽的自定义宽度。
我该如何进行这项工作？
My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.
The #container itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #container with a custom width due to a graphic.
As such, it does not get a drop shadow added to its right and left. Only the nav menu down needs the drop. This is because the header is set to a custom width, and juts out beyond the #container itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.
For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.
I've tried to add a drop shadow to the left and to the right side of the #container, from the nav menu down with the following solutions:
I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the
#container div background-image, but, probably because the#containeritself is set to 960px wide, the 1010px wide background can't show up. Note that changing the 960px width will create a cascade of death in this simple 2 column layout.I tried CSSing up a makeshift shadow box div "around" the container div, but that isn't working because my header has a custom width that extends wider than the container.
How do I make this work?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你可以尝试这样的事情：
当然，修改这些值直到它适合你。
You could try something like this:
Of course, mess around with the values until it suits you.
单行代码：
只需插入相应的css样式元素
完毕！
Single line of code :
Just insert in corresponding css style element
Done!