在border-image中添加多个渐变，是否可行？

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/

- thadeuszlay

---

看起来你已经得到了答案...不，你不能。 - Paulie_D

Answer 1

不可以在border-image简写属性或border-image-source长属性中设置多个图像。

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

名称：border-image-source

值： none | <image>

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

名称：background-image

值： <bg-image> [ , <bg-image> ]*

以下是从规范中提取的背景图层的介绍：（重点在于“我”）

CSS3中，一个盒子的背景可以有多个图层。‘background-image’属性中逗号分隔的值的数量决定了图层的数量。

- Harry

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;
}

我将伪元素的插入设置为负边框宽度，以确保其与父元素的边框对齐。

- Cryothic