border渐变圆角

• 需求如下，红色方框，画一个渐变border的圆。但是sketch上识别的是 border-image：linear-gradient，实践后发现无法变成圆角。

• 网上搜索的实现方案 background-image和background-clip

.circle{
       width: 46px;
       height: 46px;
       border-radius: 100%;
       line-height: 46px;
       text-align: center;
        font-size: 24px;
        font-weight: 400;
        margin: 0 auto;
        padding: 1px;
        color: #2B435F;
        background-image: linear-gradient(#fff, #fff), linear-gradient(156deg, #A7BDD5, #2B435F);
       background-clip: content-box,padding-box;
}

• 参考地址
  • 这是参考文章，两种方案。另一种是使用伪类，但是我写着无效，之后再看看