在边框图像中添加多个渐变？

Question

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

有没有办法在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/

这可行，但只包含一个渐变：

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 shorthand 或 border-image-source 普通格式属性。

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

Name: border-image-source

Value: none | <image>

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

Name: background-image

Value: <bg-image> [ , <bg-image> ]*

以下是 spec which introduces layering of background images 的摘录：（强调我的）

The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property.

在边框图像中添加多个渐变？

Add more than one gradient in border-image?

html

css

border

border-image