CSS圆形头像叠加排列，是一种比较常见的布局方式，可以方便地在网页中显示多个头像。本文将简要介绍如何使用CSS实现圆形头像的叠加排列效果。

/*CSS代码*/
.avatar-wrap{
position:relative;
display:inline-block;
margin-right:20px;
}
.avatar-wrap .avatar{
position:absolute;
width:50px;
height:50px;
border-radius:50%;
background-color:#ffffff;
box-shadow:rgba(0,0,0,0.15) 0 2px 6px;
}
.avatar-wrap .avatar:first-child{
z-index:2;
}
.avatar-wrap .avatar:last-child{
left:10px;
z-index:1;
transform:rotate(20deg);
}
.avatar-wrap .avatar:nth-child(2){
left:5px;
z-index:3;
transform:rotate(-20deg);
}

上述代码创建了一个.avatar-wrap（头像容器）元素，内部包含多个.avatar（头像）元素。通过给.avatar-wrap设置position:relative，可以让内部的.avatar元素以此为参考点进行定位。

.avatar-wrap .avatar:first-child通过设置z-index的值为2，将其中第一个头像设为最上层。.avatar-wrap .avatar:last-child为设置倒数第一个头像的位置和旋转角度。.avatar-wrap .avatar:nth-child(2)则为设置倒数第二个头像的位置和旋转角度。

注意：以上代码仅是实现圆形头像叠加排列的示例之一，可以根据自己的需要进行修改。