CSS 框阴影 - 仅顶部和底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6671375/
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
CSS Box Shadow - Top and Bottom Only
提问by Cofey
Possible Duplicate:
drop shadow only bottom css3
可能的重复：
仅底部 css3 投影
I cannot find any examples of how to do this, but how can I add a box shadow only to the top and bottom of an element?
我找不到任何有关如何执行此操作的示例，但是如何仅在元素的顶部和底部添加框阴影？
回答by Teodor
As Kristian has pointed out, good control over z-values will often solve your problems.
正如 Kristian 所指出的，对 z 值的良好控制通常可以解决您的问题。
If that does not work you can take a look at CSS Box Shadow Bottom Onlyon using overflow hidden to hide excess shadow.
如果这不起作用，您可以查看CSS Box Shadow Bottom Only使用溢出隐藏来隐藏多余的阴影。
I would also have in mind that the box-shadow property can accept a comma-separated list of shadows like this:
我还要记住， box-shadow 属性可以接受一个逗号分隔的阴影列表，如下所示：
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
This will give you some control over the "amount" of shadow in each direction.
这将使您可以控制每个方向的阴影“数量”。
Have a look at http://www.css3.info/preview/box-shadow/for more information about box-shadow.
有关 box-shadow 的更多信息，请查看http://www.css3.info/preview/box-shadow/。
Hope this was what you were looking for!
希望这就是你要找的！
回答by gillytech
After some experimentation I found that a fourth value in the line controls the spread (at least in FF 10). I opposed the vertical offsets and gave them a negative spread.
经过一些实验，我发现该行中的第四个值控制了传播（至少在 FF 10 中）。我反对垂直偏移并给它们一个负的传播。
Here's the working pen: http://codepen.io/gillytech/pen/dlbsx
这是工作笔：http: //codepen.io/gillytech/pen/dlbsx
<html>
<head>
<style type="text/css">
#test {
width: 500px;
border: 1px #CCC solid;
height: 200px;
box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
This works perfectly for me!
这对我来说非常有效！
回答by Daniel Ighisan
So this is my first answer here, and because I needed something similar I did with pseudo elements for 2 inner shadows, and an extra DIV for an upper outer shadow. Don't know if this is the best solutions but maybe it will help someone.
所以这是我在这里的第一个答案，因为我需要类似的东西，我对 2 个内阴影的伪元素做了类似的事情，并为上层外阴影添加了一个额外的 DIV。不知道这是否是最好的解决方案，但也许它会帮助某人。
HTML
HTML
<div class="shadow-block">
<div class="shadow"></div>
<div class="overlay">
<div class="overlay-inner">
content here
</div>
</div>
</div>
CSS
CSS
.overlay {
background: #f7f7f4;
height: 185px;
overflow: hidden;
position: relative;
width: 100%;
}
.overlay:before {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6);
content: " ";
display: block;
margin: 0 auto;
width: 80%;
}
.overlay:after {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5);
content: "-";
display: block;
margin: 0 auto;
position: absolute;
bottom: -65px;
left: -50%;
right: -50%;
width: 80%;
}
.shadow {
position: relative;
width:100%;
height:8px;
margin: 0 0 -22px 0;
-webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
border-radius: 50%;
}
回答by aheinke
I've played around with it and I think I have a solution. The following example shows how to set Box-Shadow so that it will only show a shadow for the inset top and bottom of an element.
我玩过它，我想我有一个解决方案。下面的例子展示了如何设置 Box-Shadow 以便它只为元素的插入顶部和底部显示阴影。
Legend: insetOption leftPosition topPosition blurStrength spreadStrength color
图例： insetOption leftPosition topPosition blurStrength spreadStrength color
Description
The key to accomplishing this is to set the blur value to <= the negative of the spread value (ex. inset 0px 5px -?px 5px #000; the blur value should be -5 and lower) and to also keep the blur value > 0 when subtracted from the primary positioning value (ex. using the example from above, the blur value should be -9 and up, thus giving us an optimal value for the the blur to be between -5 and -9).
说明
完成此操作的关键是将模糊值设置为 <= 展开值的负值（例如 inset 0px 5px -?px 5px #000；模糊值应为 -5 及更低）并保持模糊当从主要定位值中减去时，value > 0（例如，使用上面的示例，模糊值应为 -9 及以上，从而为我们提供了介于 -5 和 -9 之间的最佳模糊值）。
Solution
解决方案
.styleName {
/* for IE 8 and lower */
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true);
/* for IE 9 */
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for webkit browsers */
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for firefox 3.6+ */
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
}
回答by Kristian
essentially the shadow is the box shape just offset behind the actual box. in order to hide portions of the shadow, you need to create additional divs and set their z-index above the shadowed box so that the shadow is not visible.
本质上，阴影是刚好在实际盒子后面偏移的盒子形状。为了隐藏部分阴影，您需要创建额外的 div 并将它们的 z-index 设置在阴影框上方，以便阴影不可见。
If you'd like to have extremely specific control over your shadows, build them as images and created container divs with the right amount of padding and margins.. then use the png fix to make sure the shadows render properly in all browsers
如果您想对阴影进行极其具体的控制，请将它们构建为图像并创建具有适量填充和边距的容器 div.. 然后使用 png 修复以确保阴影在所有浏览器中正确呈现
