当前位置：首页 > news >正文

CSS——圆形头像外嵌光圈

news 2025/7/5 18:57:58

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 的一些知识：

background 直接使用头像照片作为背景，默认背景是填满 padding-box
在设置完 padding 作为间隙之后，然后使用关键属性 background-clip: content-box; 就可以让我们的预想设计发挥功能
然后再设置 border 作为外层光圈即可
其实实现的方法很多，使用方法二也可以只用一个元素完成，不过，使用 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);
}