解决渐变色和border-radius的兼容性问题

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

• 已知，border-image可以给边框设置渐变效果，border-radius可以设置圆角。
• 然而这两个是不能一起使用的；

那我就换一个思路，思路的原理是： 两个div。第一个div设置大一点。第二个img设置小一点，用padding顶一下，就会出现圆色的边框线：具体实现的思路，请往下看：

 <!-- 头像 -->
      <div class="headSculpture">
        <img
          src="https://profile.csdnimg.cn/B/B/C/2_weixin_46174785"
          class="headSculptureImg"
          alt=""
        />
      </div>

  .headSculpture {
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0.6rem;
    left: 0.75rem;
    border-radius: 50%;
    padding: 2px;
    background-image: -webkit-linear-gradient(
      31deg,
      rgba(12, 133, 191, 1),
      rgba(191, 15, 34, 1)
    );
    .headSculptureImg {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

效果是: