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

}

this online tool

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

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/

Answer 1

不，您无法将多个图片设置为border-image简写或border-image-source长手边。

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

名称：border-image-source

价值：无| ＆lt;图像＆GT;

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

名称：background-image

值：＆lt; bg-image＆gt; [，＆lt; bg-image＆gt; ] *

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

框的背景可以在CSS3中有多个图层。 图层数由'background-image'属性中逗号分隔值 的数量决定。

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

1 个答案: