CSS模板是現(xiàn)在很多站長在做網(wǎng)站時的不二選擇。它將網(wǎng)站的外觀和樣式完全分離，使得我們可以更加自由地定制自己需要的網(wǎng)站風(fēng)格。其中，一個比較重要的技能就是如何使用CSS模板來設(shè)計人物圖片，下面我們來詳細了解一下：

.img-box{
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.img-box img{
width: 100%;
height: 100%;
object-fit: cover;     // 圖片填充方式，保持比例并裁剪
}

在上述代碼中，我們首先給圖片容器設(shè)置了一個寬度和高度，并將邊角設(shè)置為圓形，使得圖片顯示時呈現(xiàn)出圓形的效果。由于圖片可能會超過容器的大小，我們再給容器設(shè)置了 overflow:hidden 的屬性，將超出部分隱藏掉。

接下來，我們針對 img 標簽來設(shè)置圖片的大小和填充方式。使用 object-fit 屬性，可以使得圖片保持原有比例并且裁剪，填滿整個容器。這樣，不論圖片的尺寸是否一致，都可以呈現(xiàn)出協(xié)調(diào)美感的效果。

總的來說，設(shè)計人物圖片并不是很難，但是要想呈現(xiàn)出專業(yè)、高質(zhì)感的效果，就需要我們在代碼設(shè)置上下一些功夫。