投影仅底部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），以防止其超出角落。

这里是小提琴（更改遮罩阴影的颜色以查看其实际工作原理）。