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

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

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

当前回答

只需使用扩散参数使阴影变小:

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

现场演示:http://dabblet.com/gist/a8f8ba527f5cff607327

为了在两侧看不到任何阴影，扩展半径(第4个参数)的绝对值需要与模糊半径(第3个参数)相同。

2011-03-29 15:22:10

其他回答

如果你在背景上有一个固定的颜色，你可以用两个背景颜色相同的掩蔽阴影来隐藏侧影效果，并且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)，以防止它延伸到角落之外。

这里是小提琴(改变掩蔽阴影的颜色，看看它是如何工作的)。

div { 宽度:100 px; 身高:100 px; 边框:1px纯粉色; Box-shadow: -6px 0白色，6px 0白色，0 7px 5px -2px黑色; ｝ < div > < / div >

2014-07-11 13:09:54

我觉得这就是你想要的?

.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

另一个想法是基于@theengineear的回答，我将使用inset而不是polygon。它更容易，因为它的工作方式与边距或填充相同。我还将依靠CSS变量来轻松定义所有不同的情况。

.shadow { box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5); clip-path:inset(var(--t,0) var(--r,0) var(--b,0) var(--l,0)) } .top { --t:-100%; } .right { --r:-100%;} .bottom { --b:-100%; } .left { --l:-100%;} /* layout for example */ .box { display: inline-block; vertical-align: top; background: #338484; color: #fff; width: 4em; height: 2em; margin: 1em; padding: 1em; } <div class="box">none</div> <div class="box shadow top right left bottom">all</div> <div class="box shadow top">top</div> <div class="box shadow right">right</div> <div class="box shadow bottom">bottom</div> <div class="box shadow left">left</div> <div class="box shadow bottom right">bottom right</div> <div class="box shadow bottom top">top bottom</div> <div class="box shadow left top right">top left right</div> <div class="box shadow left right"> left right</div>

2021-01-20 10:36:05

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

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

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

2019-01-30 19:14:10