border-image和border-radius不能同时生效问题——实现带渐变的边框圆角

实现的效果：

image.png

按照平时写样式的思路，border-image实现渐变效果，border-radius实现边框圆角，把样式写好之后，大无语事件，圆角不见了，出现了下面的效果，

image.png

但是效果还是要实现的，一开始想着和设计师要一张渐变的圆形背景图，大致看了一下项目这样的效果不止一处，于是换了一种思路

效果图：

image.png

html代码：

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%;
        }