投影只有底部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（=较less的规则），所以不需要在伪元素上的特殊定位。
#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），以防止延伸到angular落以外。
这里的小提琴 （改变掩蔽阴影的颜色，看看它是如何工作的）。
阅读规格总是比较好的。 没有box-shadow-bottom属性，正如Lea指出的那样，你应该总是把un-prefixed属性放在底部，在前缀之后。
所以就是：
.shadow { -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; }
<div class="shadow">Some content</div>
我认为这是你之后？
.shadow { -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black; -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black; box-shadow: 0 0 0 4px white, 0 6px 4px black; }
<div class="shadow">wefwefwef</div>
如何使用一个包含溢出设置为隐藏和底部填充的包含div？ 这似乎是最简单的解决scheme。
对不起，我没有想到这个自己，但看到了别的地方 。
使用一个元素来包装元素得到箱形阴影和溢出：隐藏在包装上，你可以使额外的阴影消失，仍然有一个可用的边框。 这也解决了这个问题，因为这个元素看起来更小，因为这个扩散。
喜欢这个：
#wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; }
内容在这里
仍然是一个聪明的解决scheme，它必须在纯CSS中完成！
正如Jorgen Evens所说。
我也需要一个影子，但只有在一个形象下，稍微左右摆放。 这对我工作：
.box-shadow { -webkit-box-shadow: 5px 35px 30px -25px #888888; -moz-box-shadow: 5px 35px 30px -25px #888888; box-shadow: 5px 35px 30px -25px #888888; }
这个应用的元素是一个页面范围的图像（980px x 300px）。
如果在摆弄设置时有帮助，他们运行如下：
水平阴影，垂直阴影，模糊距离，散布（即阴影大小）和颜色。
如果你的背景是坚实的（或者你可以使用CSS来重现），你可以使用线性渐变的方式：
background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
更新别人的答案透明度方面而不是白色，所以它也适用于其他颜色的背景。
body { background: url(wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg) } div { background: url(w3css/img_avatar3.png) center center; background-size: contain; width: 100px; height: 100px; margin: 50px; border: 5px solid white; box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black; }
<div> </div>
内心的阴影
.shadow { -webkit-box-shadow: inset 0 0 9px #000; -moz-box-shadow: inset 0 0 9px #000; box-shadow: inset 0 0 9px #000; }
<div class="shadow">wefwefwef</div>
