具有透明背景和边界半径的线性渐变边界

Question

我在弄清楚如何创建满足以下要求的元素时遇到了麻烦：

1. 具有透明的背景，以允许其父母的背景通过
2. 具有边界半径
3. 具有线性渐变边框

我的current implementation可以满足除1之外的所有条件。

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

html {
    background: red;
}

.box {
    width: 400px;
    height: 400px;
    border-radius: 8px;

    background: black;
    background-clip: padding;
    border: none;
    margin: 40px;
    position: relative;

    &:before {
        border-radius: inherit;
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -4px;
        z-index: -1;
        background: linear-gradient(#8800cc, #fff)
    }
}

我还看到了其他通过边框图像实现1和3而不是2的实现。

是否有可以满足所有3个要求的任何解决方案（即使它在浏览器支持的最前沿）？