实现的效果：
image.png
按照平时写样式的思路，border-image实现渐变效果，border-radius实现边框圆角，把样式写好之后，大无语事件，圆角不见了，出现了下面的效果，
image.png
但是效果还是要实现的，一开始想着和设计师要一张渐变的圆形背景图，大致看了一下项目这样的效果不止一处，于是换了一种思路
效果图：
image.png
html代码：
<div class="avatar-box">
<div class="avatar"></div>
</div>
css代码：
.avatar-box {
width: 200px;
height: 200px;
background: #040405;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.avatar-box::after {
content: "";
display: block;
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 50%;
background: linear-gradient(42deg, #2873ff, #0ce897);
z-index: -1;
}
.avatar {
width: 160px;
height: 160px;
background-color: #ffffff;
border-radius: 50%;
}
