带有渐变背景边框的圆圈，并使用JS更改颜色

Question

我需要做一个圆形边框，就像这样的代码片段/小提琴：

.box {
  width: 250px;
  height: 250px;
  position: relative;
  margin: auto;
  margin: 30px;
  border-radius: 50%;
  background: #fff;
}
.box:after {
  content: '';
  position: absolute;
  top: -15px;
  bottom: -15px;
  right: -15px;
  left: -15px;
  background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
  z-index: -1;
  border-radius: inherit;
}

<div class="box"></div>

除了内部空间需要透明，并且需要有一种更改边框渐变颜色的方法。

我可以用任何东西js/jquery/css/html

可能吗？如果是，如何？谢谢

Answer 1

可以使用

<canvas>元素(除IE 8及更早版本外，所有浏览器都支持该元素(。

以下是一些有用的链接：

• 画布教程 - MDN
• Canvas API - MDN
• 帆布备忘单

您也可以使用 SVG 元素，但这会使动画更加困难。