頭像堆疊效果是現如今流行的展示多個頭像的一種方式，而這種效果是可以通過css實現的。下面我們將介紹一種堆疊頭像的css方法。

.avatar-container {
position: relative;
display: inline-block;
}
.avatar-container .avatar {
position: absolute;
bottom: 0;
left: 0;
border: 2px solid #FFF;
border-radius: 50%;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.avatar-container .avatar + .avatar {
bottom: -10px;
left: 10px;
z-index: 1;
}

上述代碼中，我們首先創建一個頭像容器.avatar-container，并設置其定位為相對位置。然后，我們設置它內部的每個頭像.avatar都絕對定位，并將其底部和左側設為0，以便在容器中居中對齊。我們還設置了一個描邊和邊框半徑來突出顯示頭像。接下來，我們通過將第二個以及后面的頭像設置為負值bottom和正值left來在容器內創建疊加效果。我們還使用z-index屬性將第二個以及后面的頭像提高到第一個頭像的上方。

上述代碼可以幫助您創建令人驚嘆的頭像堆疊效果，可以應用于社交媒體，博客頁面等等。