Html设计小技巧之带头像框的圆形头像
<!DOCTYPE html>
<html>
<head>
<title>带头像框的圆形头像</title>
<style>
.avatar {
position: relative;
width: 100px; /* 设置头像的宽度 */
height: 100px; /* 设置头像的高度 */
border-radius: 50%; /* 设置头像为圆形 */
overflow: hidden; /* 隐藏溢出头像框的部分 */
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); /* 设置头像的阴影效果 */
}
.avatar img {
width: 100%; /* 设置图片宽度与头像框相同 */
height: auto; /* 设置图片高度自动，以保持图片比例 */
}
.avatar-frame {
position: absolute;
top: 0;
left: 0;
width: 100px; /* 设置头像框的宽度 */
height: 100px; /* 设置头像框的高度 */
border: 5px solid #fff; /* 设置头像框的边框 */
border-radius: 50%; /* 设置头像框为圆形 */
box-shadow: 0 0 4px rgba(0, 0, 0, 0.8); /* 设置头像框的阴影效果 */
}
</style>
</head>
<body>
<div class="avatar">
<img src="avatar.jpg" alt="用户头像">
<div class="avatar-frame"></div>
</div>
</body>
</html>这段代码展示了如何使用CSS创建一个带有头像框的圆形头像。.avatar类用于设置头像的基本样式，包括圆形效果和阴影。.avatar-frame类用于创建一个圆形的头像框，并且还有一个阴影效果。头像框是通过绝对定位放置在头像的上方，并且有一个白色的边框。
评论已关闭