如何只在元素的一侧创建投影?

有没有办法让阴影只落在底部?我有一个菜单，两个图像彼此相邻。我不想要一个正确的阴影，因为它重叠了正确的图像。我不喜欢使用图像，所以有没有一种方法只把它放在底部，比如:

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

当前回答

这支代码笔(不是我写的)演示了一种超级简单的方法，其他的边都非常漂亮:

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

2019-01-30 19:14:10

其他回答

阅读说明书总是好的。没有box-shadow-bottom属性，就像Lea指出的，你应该总是把没有前缀的属性放在底部，放在有前缀的属性之后。

所以它是:

.shadow { -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; Box-shadow: 0px 2px 4px #000000; ｝ <div class="shadow">一些内容</div>

2011-03-29 15:38:29

我觉得这就是你想要的?

.shadow { -webkit-box-shadow: 0 0 0 0 4px白色，0 6px 4px黑色; -moz-box-shadow: 0 0 0 0 4px白色，0 6px 4px黑色; Box-shadow: 0 0 0 4px白色，0 6px 4px黑色; ｝ < div class = "影子”> wefwefwef < / div >

2013-07-18 10:47:48

内阴影

.shadow { -webkit-box-shadow: inset 00 9px #000; -moz-box-shadow: inset 00 9px #000; 盒子阴影:插入00 9px #000; ｝ < div class = "影子”> wefwefwef < / div >

2013-06-12 11:04:17

这支代码笔(不是我写的)演示了一种超级简单的方法，其他的边都非常漂亮: