HTML&CSS ：“高大上”的用户头像卡片这段代码实现了一个用户头像卡片的展示效果。大家复制代码时，可能会因格式转换

这段代码实现了一个用户头像卡片的展示效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .avatar {
            position: relative;
            width: 250px;
            margin: auto;
            padding: 50px 0 0;
            border-radius: 5px;
            text-align: center;
            background: #eee;
            box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.1);
        }

        .avatar__portrait {
            position: absolute;
            left: 50%;
            top: -50px;
            margin: 0 0 0 -50px;
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }

        .avatar__portrait:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 50px;
            background: #333;
            box-shadow: 0 0 0 7px #eee;
            z-index: 1;
        }

        .avatar__portrait img {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50px;
            z-index: 1;
        }

        .avatar__title {
            margin: 5px 0;
            font-weight: 400;
        }

        .avatar__bio {
            padding: 0 15px 15px;
            font-size: 90%;
            text-align: justify;
        }

        .demo {
            display: flex;
            height: 100vh;
            background: #48BBDE;
            font-family: 'Raleway', sans-serif;
            color: #333;
        }
    </style>
</head>

<body>

    <div class="demo">
        <article class="avatar">
            <figure class="avatar__portrait" data-status="verified">
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/U7XDMtoJdKIeepUmIvAbTvk65bFRggzArS8tfdC8icAnsXtXibm4ibKBGzbofraxl5CSe0j9YXnkz7M4uZtrkprzA/640?wx_fmt=jpeg&from=appmsg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1"
                    alt="Rogie" />
            </figure>
            <h1 class="avatar__title">勒布朗.詹姆斯</h1>
            <div class="avatar__bio">
                <p>在 3 月 5 日的 NBA 常规赛中，湖人主场以 136-115 大胜鹈鹕，将连胜场次扩大至 7 场。此役詹姆斯迎来职业生涯第 50000 分里程碑。此役后，湖人以 39 胜 21
                    负稳居西部第二，40 岁的詹姆斯用里程碑与胜利诠释长青传奇，紫金军团正以强势姿态冲击更高目标。</p>
            </div>
        </article>
    </div>
</body>

</html>

HTML 结构

demo：页面的主体容器，设置为全屏高度并使用渐变背景。
avatar：定义一个用户头像卡片，包含头像、标题和简介。
avatar__portrait：定义用户头像的容器，包含一个圆形- 图片和一个阴影效果。
img：头像图片，设置为圆形并居中显示。
avatar__title：用户名称，显示为“勒布朗·詹姆斯”。
avatar__bio：用户简介，包含一段文字描述。

CSS 样式

*：全局样式，设置box-sizing为border-box，并重置padding和margin。
.avatar：定义头像卡片的样式，包括宽度、背景颜色、边框圆角和阴影效果。
.avatar__portrait：定义头像的样式，包括绝对定位、圆形边框和阴影效果。
.avatar__portrait:before：为头像添加一个圆形阴影效果，增强视觉效果。
.avatar__portrait img：设置头像图片的样式，使其为圆形并居中显示。
.avatar__title：定义用户名称的样式，包括字体权重和外边距。
.avatar__bio：定义用户简介的样式，包括内边距和字体大小。
.demo：定义页面主体的样式，包括全屏高度、渐变背景和字体。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！