CSS 仅在左侧和右侧制作带有阴影的 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5531887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a <div> with a drop shadow only on the left and right sides
提问by Chopper
My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.
我的目标是在 a 的左侧和右侧添加一个阴影，#container div宽度为 960px。
The #containeritself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #containerwith a custom width due to a graphic.
它#container本身包含一个标题、一个导航菜单、主要内容、侧边栏和脚。但是#container由于图形，标题本身以自定义宽度突出。
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 #containeritself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.
因此，它不会在其左右两侧添加阴影。只有向下的导航菜单需要下拉。这是因为标题设置为自定义宽度，并且突出于#container自身之外。已经突出的东西左右两侧的阴影会破坏美感。
For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.
为了更好地可视化，我的网站看起来类似于http://www.doubleyourdating.com/，但标题元素在两侧突出。
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:
我尝试在 的左侧和右侧添加阴影#container，从导航菜单向下，使用以下解决方案：
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.
我用 Photoshop 处理了一个 1px 高、1010px 宽的图像，它在两端包含一个 25px 的“淡入淡出”。我 CSS 将其设为
#container div background-image，但是，可能是因为它#container本身设置为 960 像素宽，1010 像素宽的背景无法显示。请注意，更改 960px 宽度将在这个简单的 2 列布局中创建死亡级联。我尝试在容器 div“周围”设置一个临时阴影框 div 的 CSS，但这不起作用，因为我的标头具有比容器更宽的自定义宽度。
How do I make this work?
我如何使这项工作？
回答by Shaz
You could try something like this:
你可以尝试这样的事情：
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
Of course, mess around with the valuesuntil it suits you.
回答by Rakesh Kannan
Single line of code :
单行代码：
box-shadow: 4px 0 2px #222, -4px 0 2px #222;
Just insert in corresponding css style element Done!
只需插入相应的 css 样式元素 完成！
