CSS CSS3 问题：如何在 div 顶部没有框阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5665341/
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
CSS3 Question: how to have no box shadow on the top of a div?
提问by Laila
Right now when I do this:
现在，当我这样做时：
-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;
it gives a box shadow on all sides. I want it on 3 sides but not the top. How to prevent the shadow from appearing at the top?
它在四面八方都有一个盒子阴影。我想要它在 3 个侧面而不是顶部。如何防止阴影出现在顶部？
采纳答案by ajcw
If you can nest two divs then you should be able to use a combination of margins and overflow:hiddento 'chop off' the top shadow without losing the required effect on the other edges.
如果您可以嵌套两个 div，那么您应该能够使用边距组合并overflow:hidden“切掉”顶部阴影，而不会丢失其他边缘所需的效果。
For example this mark-up:
例如这个标记：
<div class="outer">
<div class="inner">hello</div>
</div>
And this CSS
还有这个 CSS
.outer {
margin-top: 200px;
overflow: hidden;
}
.inner {
width:200px;
height: 200px;
margin: 0 200px 200px 200px;
-moz-box-shadow: 0px 5px 200px #00C0FF;
-webkit-box-shadow: 0px 5px 200px #00C0FF;
box-shadow: 0px 5px 200px #00C0FF;
}
Gives this result - http://jsfiddle.net/ajcw/SLTE7/2/
给出这个结果 - http://jsfiddle.net/ajcw/SLTE7/2/
回答by Syafiq Freman
box-shadow support multiple commas which mean this is possible and can be done like below:
box-shadow 支持多个逗号，这意味着这是可能的，可以像下面那样完成：
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
The first group bring shadow to the right & bottom while the second group bring shadow to the left (by using negative value) & bottom.
第一组将阴影带到右侧和底部，而第二组将阴影带到左侧（使用负值）和底部。
The complete code for cross browser support is:
跨浏览器支持的完整代码是：
-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
回答by cdeszaq
Just have a vertical offset only:
只有一个垂直偏移：
.shadow {
-moz-box-shadow: 0px 5px 200px #00C0FF;
-webkit-box-shadow: 0px 5px 200px #00C0FF;
box-shadow: 0px 5px 200px #00C0FF;
}
This will shift the shadow down so that the top has less of a shadow. You will have to play with it to get it the way you want it in your situation. This sitealso has some great info on box shadows, such as layering, as well as browser support.
这会将阴影向下移动，以便顶部的阴影更少。您将不得不使用它以在您的情况下以您想要的方式获得它。该站点还提供了一些关于框阴影的重要信息，例如分层以及浏览器支持。
