CSS——圆形头像外嵌光圈

CSS——圆形头像外嵌光圈

话不多说，先看效果

方法一：padding 与 border 组合

先用padding在父元素中留出空白间隔，然后再通过父元素的border设置边框。这里我还使用伪元素添加了一个
需要注意的是，父元素的内容区域大小需要刚好为子元素（即内部图片）的整体大小，这边建议设置具体的单位长度，而不是直接 width:100%; height:100% 继承父元素的内容区域的大小，可能渲染的时候会有所偏差。其实我最初使用 伪元素 来绘制头像的同心圆时，也是出现了偏差，所以换了一种方法。

<div class="profile">
  <div class="profile-photo">
	  <img src="your_profile_photo" alt="">
  </div>
</div>

.profile .profile-photo {
  box-sizing: border-box;
  width: 41px;
  height: 41px;
  padding: 2px;
  border: 1px solid rgba(221, 221, 221, .7);
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile .profile-photo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.profile .profile-photo::after {
  position: absolute;
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  bottom: 0px;
  right: 0px;
  z-index: 2;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(0, 171, 85, 1);
}

方法二：padding 与 outline 组合

其实这种方法与上面的大同小异，只不过很少用到 outline 属性，甚至可以将 border 与 outline 结合，border 设置为 transparent 即可，这里就不进行过多演示了。不过在需要多个外层圆圈的时候，可以考虑综合一起使用。这里给出代码如下：

 .header-right .profile .profile-photo {
  width: 36px;
  height: 36px;
  outline: rgba(221, 221, 221, .7) solid 1px;
  outline-offset: 2px;
  position: relative;
  border-radius: 50%;
}

.header-right .profile .profile-photo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
} 

方法三：padding 与 border 组合（但是仅使用一个元素完成）

这里不考虑语义化的话，仅使用一个标签也是可以完成的，不过需要借助 background 的一些知识：

1. background 直接使用头像照片作为背景，默认背景是填满 padding-box
2. 在设置完 padding 作为间隙之后，然后使用关键属性 background-clip: content-box; 就可以让我们的预想设计发挥功能
3. 然后再设置 border 作为外层光圈即可
4. 其实实现的方法很多，使用方法二也可以只用一个元素完成，不过，使用 outline 的话，会超出其宽高设置范围，相比而言，这个更好控制一些
   代码如下：

.profile .profile-photo {
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 1px;
  border: 1px solid rgba(221, 221, 221, .7);
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./webapp/statics/images/personal_center/my_profile_photo.jpg") no-repeat center center;
  background-size: cover;
  background-clip: padding-box;
}

.profile .profile-photo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.profile .profile-photo::after {
  position: absolute;
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  bottom: 0px;
  right: 0px;
  z-index: 2;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(0, 171, 85, 1);
}

总之实现的方法很多了，甚至还可以借助 box-shadow 来进行实现，大家看哪个用起来好用就用哪个就可以啦。

创作不易，感谢支持！