Javascript 如何在CSS中创建具有渐变不透明度的边框？

是否可能有一个边界，其中内部为不透明度1，外部为不透明度0

当我拿着这把小提琴时，我想知道：

我希望能够在轴上拖动矩形，并看到它逐渐消失

我找到了这个链接：

但这不是从中心到外部的梯度，而是从上到下的梯度：

.box{
    width: 250px;
    height: 250px;
    background: #eee;
    border: 20px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 1;
}

---

您可以使用长方体阴影来模拟边框

比如：

.box2{
    width: 200px;
    height: 100px;
    background: #eee;
    padding:20px;
    box-shadow:0px 0px 20px 4px #3acfd5,0px 0px 0px 20px #3a4ed5;
}

---

您是否尝试过对边界图像使用径向渐变？没有，但我现在就尝试。谢谢：）