我找不到任何如何做到这一点的示例，但我如何才能只在元素的顶部和底部添加一个盒子阴影？
【问题讨论】：
标签： css
正如 Kristian 所指出的，对 z 值的良好控制通常会解决您的问题。
如果这不起作用，您可以查看CSS Box Shadow Bottom Only，了解如何使用溢出隐藏来隐藏多余的阴影。
我还记得 box-shadow 属性可以接受以逗号分隔的阴影列表，如下所示：
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
这将使您能够控制每个方向的阴影“数量”。
查看http://www.css3.info/preview/box-shadow/ 了解有关 box-shadow 的更多信息。
希望这就是你要找的东西！
【讨论】：
inset 0px 8px 6px -6px #888 |仅限权利inset -8px 0px 6px -6px #888 |仅限底部inset 0px -8px 6px -6px #888 |只剩inset 8px 0px 6px -6px #888
经过一些实验，我发现该行中的第四个值控制了传播（至少在 FF 10 中）。我反对垂直偏移并给它们一个负价差。
这是工作笔：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>
这非常适合我！
【讨论】：
所以这是我在这里的第一个答案，因为我需要类似的东西，所以我对 2 个内阴影使用伪元素和一个额外的 DIV 用于上外阴影。不知道这是否是最好的解决方案，但也许它会对某人有所帮助。
HTML
<div class="shadow-block">
<div class="shadow"></div>
<div class="overlay">
<div class="overlay-inner">
content here
</div>
</div>
</div>
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%;
}
【讨论】：
我玩过它，我想我有一个解决方案。下面的例子展示了如何设置 Box-Shadow 以便它只在元素的插入顶部和底部显示阴影。
图例：insetOption leftPosition topPosition blurStrength spreadStrength color
说明
完成此操作的关键是将模糊值设置为 0 当从主要定位值中减去时（例如，使用上面的示例，模糊值应为 -9 及以上，因此为我们提供了模糊值介于 -5 和 -9 之间的最佳值）。
解决方案
.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);
}
【讨论】：
本质上，阴影是在实际盒子后面偏移的盒子形状。为了隐藏部分阴影，您需要创建额外的 div 并将它们的 z-index 设置在阴影框上方，以使阴影不可见。
如果您想对阴影进行非常具体的控制，请将它们构建为图像并创建具有适量填充和边距的容器 div。然后使用 png 修复以确保阴影在所有浏览器中都正确呈现
【讨论】：