因为background-image您可以添加任意数量radial-gradient和/或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);
}