我正在尝试在一个普通的父级中添加一些形状并将阴影应用于它们。当我这样做时,前进的兄弟姐妹的影子与先前的兄弟姐妹重叠。我经历了z-index的问题,但似乎无法解决。有人可以解释这里发生了什么,可以做什么来实现我想要的。
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #333;
display: flex;
align-items: center;
justify-content: center;
}
.shape-wrapper {
opacity: 0.99;
position: relative;
width: 400px;
height: 400px;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.shape-wrapper .shape-inner {
z-index: 1;
top: 0;
left: 0;
position: absolute;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
height: 200px;
width: 200px;
}
.shape-wrapper .shape-inner:nth-child(2) {
left: 50%;
}
.shape-wrapper .shape-inner:nth-child(3) {
top: 50%;
}
.shape-wrapper .shape-inner:nth-child(4) {
top: 50%;
left: 50%;
}
.shape-wrapper .shape-inner .shape {
width: 100%;
height: 100%;
background: #000;
border: 1px solid #000;
box-shadow: 0 0 50px #fff;
}
<div class="shape-wrapper">
<div class="shape-inner">
<div class="shape shape-1">Shape1</div>
</div>
<div class="shape-inner">
<div class="shape shape-2">Shape2</div>
</div>
<div class="shape-inner">
<div class="shape shape-3">Shape3</div>
</div>
<div class="shape-inner">
<div class="shape shape-4">Shape4</div>
</div>
</div>
这是我的小提琴的link。
How It Is
How I Want
最佳答案
尝试使所有框的position: relative
和所有框的z-index
相等。