css卡片人物制作 |less css3

.card {
width: 200px;
height: 300px;
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
position: relative;
}
.card .avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.card .name {
font-size: 24px;
font-weight: bold;
margin-top: 120px;
text-align: center;
}
.card .description {
font-size: 16px;
margin-top: 10px;
text-align: center;
}
.card .social-links {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
}
.card .social-links a {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #eee;
margin: 0 10px;
}
.card .social-links a i {
color: #333;
font-size: 20px;
line-height: 40px;
text-align: center;
}

以上是一个基本的CSS样式代码，接下来大家可以在HTML文件中使用这些代码来创建一个完整的卡片人物：

李雷
一名优秀的Web前端工程师

通过以上的HTML和CSS代码，大家已经成功地制作出一个简单的卡片人物。接下来大家可以根据需求对卡片人物进行定制，例如更改背景颜色、更新社交媒体链接等等。