投影仅底部css3

Question

有没有办法只在底部放阴影？我有一个菜单，彼此相邻有2张图像。我不想要正确的阴影，因为它会重叠正确的图像。我不喜欢为此使用图像，因此有一种方法可以将其仅放置在底部，例如：

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');

Answer 1

如果背景颜色固定，则可以使用两个与背景颜色相同的遮罩阴影来隐藏侧阴影效果，并且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），以防止其超出角落。这里是小提琴（更改遮罩阴影的颜色以查看其实际工作原理）。