箱子阴影在div的四边的3 [英] Box-shadow on 3 of four sides of div

问题描述

我有两个坐在彼此顶部的div，我想要一个围绕它们的阴影。

I have 2 divs that sit on top of each other, and I want one shadow that surrounds them both. I can't wrap the 2 divs in a div.

我如何只在顶部div的顶部，左侧和右侧有阴影，而阴影只有在底部div的底部，左侧和右侧？

How can I have shadows only on the top, left, and right side on the top div, and shadows only on the bottom, left, and right side of the bottom div?

现在我有以下 -

#topDiv, #bottomDiv
{
    box-shadow: 2px 2px 10px 5px #909090; 
    -webkit-box-shadow: 2px 2px 10px 5px #909090; 
    -moz-box-shadow: 2px 2px 10px 5px #909090;   
}

推荐答案

只在三面渲染，因为它真的是一个大的模糊的块后面的元素本身。我发现伪造它的最好的方法是简单地沿Y轴移动它，并调整值直到它看起来不错。

You can't have it render on only three sides, as it's really a big blurry block behind the element itself. The best way I've found to fake it is simply by moving it further down the Y-axis and tweaking values until it looks good.

你也可以试验 :: before 和 :: after 之后，尝试制作一个2/3高度的伪元素， ，但同样，这是一个黑客，它需要调整看起来不错。

You could also experiment with ::before and ::after and try making a 2/3-height pseudo-element that carries the box-shadow, but again, it's a hack, and it'll require tweaking to look good.

这篇关于箱子阴影在div的四边的3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！