我想创建类似以下屏幕快照的内容,但是我无法找出在第一个或第二个框上都没有阴影的z-index值(它们总是堆叠在一起,第一个框在顶部,或第二个)。
有没有办法实现以下目标?
body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px
black; margin: auto; position: relative; }
#box-one { left: -50px; z-index: 1; }
#box-two { right: -50px; z-index: 1; }
https://codepen.io/eoghanmurray/pen/oVEEVK
最佳答案
如果可以使用filter
和drop-shadow
,则可以对容器应用阴影。该阴影与图像的Alpha通道(在本例中为内容的轮廓)一致,而不是简单的矩形,因此有所不同:
body {
background: darkgrey;
padding-top: 50px
}
#box-one,
#box-two {
background: white;
width: 200px;
height: 200px;
margin: auto;
position: relative;
}
#box-one {
left: -50px;
z-index: 1;
}
#box-two {
right: -50px;
z-index: 1;
}
#top {
filter: drop-shadow(0 0 20px black);
}
<div id="top">
<div id="box-one"></div>
<div id="box-two"></div>
</div>