html部分
<div class="login_box">
<!-- 图标盒子 -->
<div class="avatar_box">
<img src="../assets/logo.png">
</div>
</div>
css部分
.avatar_box{
height: 130px;
width: 130px;
border: 1px solid gray;
border-radius: 50%;
padding: 10px;//增加内边距,把图片挤进去
box-shadow: 0 0 10px #ddd;//给边框加阴影,向外扩散10px
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
}
img{
// 因为图片本身是只有图像颜色画存在,其余地方都是空的,所以可以添加背景色,
//这样中间留出来一个padding的距离
width: 100%;
height: 100%;
// 图片本身(本身也是一个块元素)也设置成圆形
border-radius: 50%;
background-color: #eee;
}