效果：
源码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
400px;
height: 200px;
background-color: #7bbfea;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -200px;
border-radius: 10px;
}
.qrcode {
100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: 60px;
}
.about {
230px;
height: 200px;
background-color: #fffef9;
position: absolute;
top: 0;
left: 0;
border-radius: 5px 25px 25px 5px;
box-shadow: 5px 5px 5px #ccc inset;
border-bottom: 1px solid #ccc;
}
section {
position: absolute;
height: 40px;
150px;
left: 50%;
top: 50%;
margin-top: -30px;
margin-left: -75px;
letter-spacing: 5px;
font-family: 'Lobster', cursive;
text-align: center;
}
section p {
margin-top: .2em;
font-size: 1.1em;
}
img {
100%;
border-radius: 10px;
opacity: .85;
}
</style>
</head>
<body>
<div class="container">
<div class="about">
<section>
<h2>Mr.Yao</h2>
<p>Hello World</p>
</section>
</div>
<div class="qrcode">
<img src="QQ%E5%9B%BE%E7%89%8720200521231236.jpg" alt="qrcode">
</div>
</div>
</body>
</html>