关于小程序 css 问题头像叠加

我有搜到类似的东西但是他给的代码不置中这让我有点头疼
https://blog.csdn.net/dwb123456123456/article/details/83757485

这个是找来的文但是我添加的越多他只往左边添加我想说动态控制每添加1
first-of-type*40 问题是这样不知道如何写请大神给点建议

用transform:translateX只能改变元素显示的位置，元素还是占据着在页面上原本所占的空间，这自然影响居中。
应该为图片设置负值的 margin 来实现头像叠加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
<style>
#box {
    background-color: #cfc;
    font-size: 0px;
    text-align: center;
}
#box img {
    border-radius: 50%;
    margin: 0px -15px;
}
</style>

</head>
<body>
<div id="box">
    <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
    <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
    <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
    <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
    <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
    <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
    <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
    <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
</div>

</body>
</html>

“动态控制每添加1 first-of-type*40 问题是这样不知道如何写” 这句话什么一什么意思？
是每次添加的图片都加到数组的第一个吗？还有人家实例很完善了剩下的自己改下就行了

如果显赫他的效果一样就动态的往images数组的第一个下标为0的位置添加图片就行了

关于小程序 css 问题 头像叠加

关于小程序 css 问题头像叠加