Html设计小技巧之带头像框的圆形头像
1. 效果展示
2.代码展示
CSS代码
* {
padding: 0;
margin: 0;
}
body {
/* 居中效果 */
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
/* 夜空效果图 */
background: linear-gradient(#19144a, #171139, #140d28);
}
/* 头像框 */
.headBox {
/* 采用absolute，实现图层覆盖 */
position: absolute;
height: 330px;
width: 330px;
/* 设置图层比重、优先级 */
z-index: 1;
}
/* 圆形头像 */
.icon {
/* position: absolute; */
height: 285px;
width: 285px;
/* 圆形主要实现 */
border-radius: 50%;
z-index: -1;
}HTLM代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带有圆形头像的头像框</title>
<link rel="stylesheet" href="./css/006.css" >
</head>
<body>
<img src="./image/HeadBox.png" class="headBox" >
<img src="./image/Head.png" class="icon">
</body>
</html>
2148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
