CSS盒子阴影 – 仅顶部和底部
可能重复：
投影只有底部css3
我找不到如何做到这一点的任何例子，但我怎么能添加一个盒子阴影只有一个元素的顶部和底部？
正如Kristian指出的那样，对z值的良好控制通常可以解决您的问题。
如果这样做不起作用，您可以查看CSS Box Shadow Bottom Only ，使用隐藏的溢出来隐藏多余的阴影。
我也要记住，box-shadow属性可以接受逗号分隔的阴影列表，如下所示：
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888; 这会给你一些控制每个方向的阴影“数量”。
有关box-shadow的更多信息， 请参阅http://www.css3.info/preview/box-shadow/ 。
希望这是你正在寻找的！
经过一些实验后，我发现线上的第四个值控制了传播（至less在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>
这对我来说是完美的！
所以这是我在这里的第一个答案，因为我需要类似于两个内部阴影的伪元素和外部阴影的一个额外的DIV。 不知道这是不是最好的解决scheme，但也许会帮助别人。
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%; }
我已经玩过了，我想我有一个解决scheme。 以下示例显示如何设置Box-Shadow，使其仅显示元素顶部和底部的插入阴影。
图例 ：insetOption leftPosition topPosition blurStrength spreadStrength颜色
描述
实现这一点的关键是将模糊值设置为<=扩展值的负值（例如，插图0px 5px – ？px 5px＃000;模糊值应该是-5和更低），并保持模糊值> 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); }
基本上这个阴影就是盒子的形状，刚好在实际的盒子后面。 为了隐藏部分阴影，需要创build额外的div，并在阴影框上方设置它们的z-index，以使阴影不可见。
如果你想对阴影有非常明确的控制，把它们build立为图像，并用适当的填充和边距创build容器div。然后使用png修正来确保阴影在所有浏览器中正确渲染
