CSS定位：关联位置由负边距定义

Question

如何使盒子重叠并逐个偏移顶部和左侧5px只使用css

plz check the result what i want first

请检查上方链接

我认为只需一种样式定义就可以完成，无需定义每个盒子的位置

你可以帮助我在this code中调整它吗？

HTML

<div class="holder">
    <div class="card" ></div>
    <div class="card" ></div>
    <div class="card" ></div>
    <div class="card" ></div>
</div>

CSS

.holder{
position:absolute;
top:100px;
left:100px;
display:block; 
font-size: 0;
}
.card{
position:relative;
background:red;
opacity: 0.4;
width:40px;
height:60px;
margin-top:-55px;
margin-left:-35px;
}

非常感谢你

Answer 1

如何最小化标记并使用框阴影呢？

这允许您只声明一个卡片元素，并使用多个盒子阴影：

＆＃13;

＆＃13;

.holder{
position:absolute;
top:100px;
left:100px;
display:block; 
font-size: 0;
}
.card{
position:relative;
background:red;
opacity: 0.4;
width:40px;
height:60px;
margin-top:-55px;
margin-left:-35px;
  box-shadow: 5px 5px rgba(255,0,0,0.4),10px 10px rgba(255,0,0,0.4), 15px 15px rgba(255,0,0,0.4), 20px 20px rgba(255,0,0,0.4);
}

＆＃13;

<div class="holder">
    <div class="card" ></div>
</div>

＆＃13;

＆＃13;

＆＃13;