CSS3 圆头像

CSS3 提供了许多新的特性和选择器，其中之一是圆形头像。通过设置边框半径和背景图片，您可以轻松创建一个漂亮的圆形头像。

.avatar {
border-radius: 50%;
background-image: url("avatar.jpg");
background-size: cover;
width: 100px;
height: 100px;
}

上述代码中，我们首先用 border-radius 属性将图片的边框转换为圆形。该属性的值为 50%，因为我们要将它转换为完美的圆形。接下来，我们使用 background-image 属性设置要显示的头像图片，并使用 background-size 属性设置图片的大小以适应头像的大小。最后，我们将宽度和高度设置为 100 像素，确保圆形头像的大小一致。

使用上述代码，您可以轻松地创建一个漂亮的圆形头像，以在您的网站或社交媒体页面上使用。