Html 在CSS中，如何将渐变从外部应用到内部，仅应用到边框？

根据MDN文档，这似乎没有得到明确的支持。因此，我在下面的链接代码笔中进行了如下尝试。我知道嵌套的

非常难看，不能成为一个好的可重用样式的组件，但是我不知道如何才能达到这个效果！任何关于如何实现这一目标的指导都将不胜感激

以下是一个指向钢笔的链接，展示了我当前的方法：

：根目录{
--outer-battle-window-color-0:#7c7874；
--外层-battle-window-color-1:#c8c4c0；
--外-battle-window-color-2:#ccc9cc；
--外部-battle-window-color-3:#c9c9cb；
--外-battle-window-color-4:#c2c1c5；
--外层-battle-window-color-5:#71767e；
--外窗-battle-window-color-6:#6b6e87；
--战斗窗口顶部渐变颜色：#6c70a6；
--战斗窗口中渐变色：#21217c；
--战斗窗口底部渐变颜色：#0401136；
--战斗窗口边界半径：5px；
}
html{
字体系列：“最终幻想3/6常规字体”，单空格；
颜色：#埃塞迪；
边际：0px；
填充：0px；
背景色：var（--战斗窗口中渐变色）；
文本阴影：3px2px#2d2a4b；
}
div{
背景色：var（--战斗窗口中渐变色）；
}
#外窗边框颜色0{
边框颜色：var（-outer-battle-window-color-0）；
边框宽度：1px；
边框样式：实心；
边界半径：var（--作战窗口边界半径）；
}
#外窗边框颜色_1{
边框颜色：var（--outer-battle-window-color-1）；
边框宽度：1px；
边框样式：实心；
边界半径：var（--作战窗口边界半径）；
}
#外窗边框颜色_2{
边框颜色：var（--outer-battle-window-color-2）；
边框宽度：1px；
边框样式：实心；
边界半径：var（--作战窗口边界半径）；
}
#外窗边框颜色_3{
边框颜色：var（--outer-battle-window-color-3）；
边框宽度：1px；
边框样式：实心；
边界半径：var（--作战窗口边界半径）；
}
#外窗边框颜色_4{
边框颜色：var（--outer-battle-window-color-4）；
边框宽度：1px；
边框样式：实心；
边界半径：var（--作战窗口边界半径）；
}
#外窗边框颜色_5{
边框颜色：var（--outer-battle-window-color-5）；
边框宽度：1px；
边框样式：实心；
边界半径：var（--作战窗口边界半径）；
}
#外窗边框颜色_6{
边框颜色：var（--outer-battle-window-color-6）；
边框宽度：1px；
边框样式：实心；
边界半径：var（--作战窗口边界半径）；
}

这是对边界的考验！

我认为您应该使用border image属性，将其设置为线性渐变并进行调整，直到达到您想要的效果。毕竟css将linear-gradient（）视为图像。

---

如果你对你想要制作的东西有一个印象，也许我可以帮你把它变成现实。我希望这有帮助

我认为您应该使用border image属性，将其设置为线性渐变并进行调整，直到达到所需的效果。毕竟css将linear-gradient（）视为图像。

---

如果你对你想要制作的东西有一个印象，也许我可以帮你把它变成现实。我希望这有助于

您可以使用多个背景构建它：

.box{
--r:15px；/*半径*/
--g：红色，蓝色；/*渐变色*/
边界半径：var（--r）；
填充：计算（var（--r）+5px）；
背景：
/*角落*/
径向梯度（右下角最远一侧，var（--g））左上角/var（--r）var（--r），
径向梯度（最远侧位于右上角，var（--g））左下角/var（--r）var（--r），
径向梯度（左下最远侧，var（--g））右上/var（--r）var（--r），
径向梯度（左上角最远一侧，var（--g））右下角/var（--r）var（--r），
/*边界*/
线性梯度（至顶部，var（--g））顶部/计算（100%-2*var（--r））var（--r），
线性梯度（至底部，var（--g））底部/计算（100%-2*var（--r））var（--r），
线性梯度（向右，var（--g））向右/var（--r）计算（100%-2*var（--r）），
线性梯度（向左，var（--g））左/var（--r）计算（100%-2*var（--r））；
背景重复：无重复；
宽度：150px；
显示：内联块；
显示：内联块；
垂直对齐：顶部；
字体大小：25px；
}

里面有一些文本
里面有更多的文字
内部的一些文本

您可以使用多个背景构建它：

.box{
--r:15px；/*半径*/
--g：红色，蓝色；/*渐变色*/
边界半径：var（--r）；
填充：计算（var（--r）+5px）；
背景：
/*角落*/
径向梯度（右下角最远一侧，var（--g））左上角/var（--r）var（--r），
径向梯度（最远侧位于右上角，var（--g））左下角/var（--r）var（--r），
径向梯度（左下最远侧，var（--g））右上/var（--r）var（--r），
径向梯度（左上角最远一侧，var（--g））右下角/var（--r）var（--r），
/*边界*/
线性梯度（至顶部，var（--g））顶部/计算（100%-2*var（--r））var（--r），
线性梯度（至底部，var（--g））底部/计算（100%-2*var（--r））var（--r），
线性梯度（向右，var（--g））向右/var（--r）计算（100%-2*var（--r）），
线性梯度（向左，var（--g））左/var（--r）计算（100%-2*var（--r））；
背景重复：无重复；
宽度：150px；
显示：内联块；
显示：内联块；
垂直对齐：顶部；
字体大小：25px；
}

里面有一些文本
里面有更多的文字
里面的一些文字

只有你所指的边界？只有你所指的边界？我真的很感谢你的回答，如果你能通过为我们这些不熟悉这些内联计算背后意图的人添加内联注释来扩展这个答案，我很乐意选择正确的答案！我真的很感激