[解決済み] border-imageに複数のグラデーションを追加する？

質問

対象者 background-image をいくつでも追加することができます。 radial-gradient および linear-gradient を選択します。しかし border-image は、1つしか追加できないようです。グラデーションの表示方法は、borderとbackgroundで原理は同じはずなので、かなり不思議です。

に複数のグラデーションを追加する方法はありますか？ border-image ? 私は純粋なCSSソリューションにしか興味がないのです。

1つ以上のグラデーションが含まれているため、これはうまくいきません。

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/

これは動作しますが、グラデーションは1つしか含まれていません。

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/

解決方法は？

に複数の画像を設定することはできません。 border-image ショートハンドまたは border-image-source ロングハンドプロパティ

の仕様通りです。 border-image-source 値として指定されているのは、1つの画像レイヤーのみであることがわかります。

名前：border-image-source

値: なし | <image>

一方 background-image 複数のレイヤーが指定されていることがわかる。

名前：background-image

値: <bg-image> [ , <bg-image> ]*。

以下は、その抜粋です。 仕様では、背景画像のレイヤリングが導入されています。 : (強調)

CSS3 では、ボックスの背景は複数のレイヤーを持つことができます。そのため レイヤーの数は、カンマで区切られた値の数で決定されます。 を 'background-image' プロパティに設定します。