Html 多元素上的CSS梯度'；边界

我正在努力实现这样的目标（颜色无关）：

我几乎不知道如何做到这一点。我已经设法通过multiple.js找出了如何在多个元素上进行渐变，但我没有找到任何方法将其应用于边框。 以下是我目前掌握的情况：

.interestingElement {
    padding: 0.5em 1em 0.6em 1em;
    border: 1px solid black;
    border-radius: 5px;
    margin: 1em;
    font-size: 1.1em;
    background-image: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

我希望有一种方法可以做到这一点，而不必为每个元素使用单独的渐变。任何帮助都将不胜感激。谢谢

编辑1：如果我的目标只是添加一个渐变边框，我肯定会使用边框图像。有没有可能有一种方法让它通过多个元素？也许是这样的：

.interestingElement {
    padding: 0.5em 1em 0.6em 1em;
    border: 5px solid black;
    border-image: linear-gradient(to right, black 0%, white 100%) 30% stretch;
    border-radius: 5px;
    margin: 1em;
}

---

您可以使用多个

线性渐变创建此效果


div{
宽度：200px；
高度：80px；
边界半径：5px；
背景：线性渐变（向右，橙色，黄色），线性渐变（向右，橙色，黄色），线性渐变（向右，橙色，橙色），线性渐变（向右，黄色，黄色）；
背景尺寸：100%3px，100%3px，3px 100%，3px 100%；
背景位置：0,0,100%，0,0,100%0；
背景重复：无重复；
}
您有两种可能性来实现此效果

两者都在基础元素上设置渐变，在子元素上保留某种透明度以使其显示

一种可能性是使用边框颜色：透明，在背景上使用一些特殊效果将其限制为内容，在阴影上使用阴影遮罩框周围的渐变。（这很棘手。另一种可能更容易使用的方法是使用伪元素）

另一个可能性是使用混合模式。这有额外的好处，以实现也梯度的文字。但是浏览器支持较少，并且在某种程度上限制了嵌套元素中可以实现的颜色

在代码段中，element1类显示第一种方法，element2显示第二种方法


.base{
宽度：300px；
高度：100px；
背景：线性渐变（向右、红色、绿色）；
边缘顶部：10px；
溢出：隐藏；
}
.元素{
显示：内联块；
宽度：100px；
高度：30px；
顶部：25px；
位置：相对位置；
边界半径：10px；
边框：实心10px黑色；
背景色：白色；
字体大小：30px；
}
.元素：第n个子元素（1）{
左边距：10px；
}
.元素：第n个子元素（2）{
左边距：30px；
}
.要素1{
边框颜色：透明；
背景剪辑：内容框；
盒影：0px 0px 0px 30px白色，10px-20px 0px 20px白色，10px 20px 0px 20px白色；
}
.要素2{
边框颜色：黑色；
混合模式：轻量化；
盒影：0px 0px 0px 30px白色，10px-20px 0px 20px白色，10px 20px 0px 20px白色；
}

一个
两个
一个
两个
不完全是我想要的；这对单个元素很有效，但是我不认为这个梯度会通过多个元素。这正是我所缺少的。谢谢