未附加到其内容的圆边框渐变 CSS

Question

目标是围绕个人资料图片再现instagram故事圈，这意味着它必须是一个渐变，不一定是动画，并且图像和圈之间有一个空间。我在stackoverflow上读到，只是在图像上使用填充来在边界和内容之间留出空间，但后来我想办法让边界变成梯度，但边界是正方形的。

这是代码：

.instaimg {
border-radius: 150px;
padding: 10px;
border: 8px solid transparent;
border-image: linear-gradient(45deg, red , yellow);
border-image-slice: 1;
}

还有其他方法可以实现我想要做的事情吗？我看了代码笔，但我发现的所有东西都是动画的，但我想要一些静态的，而不是动画的。。。感谢您的帮助：(

Answer 1

.gradient{
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(to right, red, orange);
padding: 3px;
}
.image{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
}

<div class="gradient">
<div class="image"></div>
</div>

因此，与具有类"的div不同；图像"；，使用您想要的图像。