在边框图像中添加多个梯度？

Question

对于background-image，您可以添加任意数量的radial-gradient和/或linear-gradient。但是对于border-image，似乎只能添加一个。如果觉得很奇怪，因为如何显示渐变的原理对于边框和背景应该是一样的，对吗？

在border-image中是否有增加多个梯度的方法？我只对一个纯CSS解决方案感兴趣。

这不起作用，因为它包含超过一个梯度：

div {
  height: 30px;
  width: 40px; 
  border: 50px solid black;
  border-image: 
  radial-gradient(circle at 20px 30px, green 20px, rgba(0,0,255, .5) 20px),
  radial-gradient(30deg, blue 22px, red 22px);

}

https://jsfiddle.net/thadeuszlay/p6r2p78g/

这是可行的，但只包含一个梯度：

div {
  height: 30px;
  width: 40px;
  border: 50px solid black;
  border-image: radial-gradient(circle at 20px 30px, green 20px, rgba(0, 0, 255, .5) 20px);
}

https://jsfiddle.net/thadeuszlay/p6r2p78g/1/

Answer 1

不，不能将多个图像设置为border-image速记或border-image-source longhand属性。

根据border-image-source的规范，我们可以看到只有一个图像层被指定为值。

名称:边框-图像源 价值:无

而对于background-image，我们可以看到指定了多个层。

名称:背景-图像 价值：，*

下面是介绍背景图像分层的规范。的一个摘录：(强调我)

一个框的背景可以在CSS3中有多个层。层的数是由“背景图像”属性中的逗号分隔值决定的。

Answer 2

当我在寻找同样的东西时，我就在这个问题上结结巴巴。但对于其他人来说，尝试一下：

您只需添加一个伪元素，并给它一个边框。猜测您将使用透明，因为否则多个渐变将根本看不见。

我有以下几点：

h1{
    --border-width: 5px;

    border-width: var(--border-width);
    border-style: solid;
    border-image: linear-gradient(135deg, #ff0000, transparent 20%);
    border-image-slice: 1;
    font-size: 5rem;
    position: relative;
}
h1::after{
    position: absolute;
    inset: calc(var(--border-width) * -1);
    content: '';
    background: transparent;
    border-width: var(--border-width);
    border-style: solid;
    border-image: linear-gradient(135deg, transparent 80%, #ff0000 100%);
    border-image-slice: 1;
}

我将伪元素的内嵌设置为负边框宽度，以确保它与父元素边框对齐。