投影只有底部css3
有没有办法只在底部放下阴影？ 我有一个菜单，旁边有两个图像。 我不想要一个正确的影子，因为它与正确的影像重叠。 我不喜欢为此使用图像，所以有没有办法只将它放在底部，如：
box-shadow-bottom: 10px #FFF; 或类似？
-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
更新4
与更新3相同，但使用现代css（=更少规则），因此不需要在伪元素上进行特殊定位。
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
position: absolute;
top: calc(10% - 10px);
left: calc(50% - 80px);
}
.box-shadow:after {
content:"";
position:absolute;
width:100%;
bottom:1px;
z-index:-1;
transform:scale(.9);
box-shadow: 0px 0px 8px 2px #000000;
}<div id="box" class="box-shadow"></div>只需使用spread参数来减小阴影：
.shadow {
-webkit-box-shadow: 0 6px 4px -4px black;
-moz-box-shadow: 0 6px 4px -4px black;
box-shadow: 0 6px 4px -4px black;
}<div class="shadow">Some content</div>如果您在背景上有固定的颜色，则可以使用背景颜色相同且blur = 0的两个遮蔽阴影隐藏侧影效果，例如：
box-shadow:
-6px 0 white, /*Left masking shadow*/
6px 0 white, /*Right masking shadow*/
0 7px 4px -3px black; /*The real (slim) shadow*/
请注意，黑色阴影必须是最后一个，并且为了防止它扩展到角落以外，它具有负向散布（-3px）。
这里的小提琴 （改变掩蔽阴影的颜色，看看它是如何工作的）。
链接地址: http://www.djcxy.com/p/89041.html