边框图像线性渐变为双色纯色

Question

我有一个带有线性渐变背景的盒子,创建为双色纯色.一种颜色是44px - 其余颜色是另一种颜色,如下所示:

background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);

效果很好.现在我想使用边框图像线性渐变以相同的方式在此元素的顶部和底部添加双色边框 - 以便边框的颜色遵循背景的颜色.诀窍是使用线性渐变作为纯色.

我尝试过这样的事情:

border-image: linear-gradient(right, #365aa5 44px, #000 0);
border-style: solid;
border-width: 2px 0 2px 0;

但很明显,它不起作用.

我有什么想法可以使这项工作？

JsFiddle在这里.

Answer 1

number您需要在属性末尾添加border-image。在您的情况下，它没有任何影响，但仍然是必需的。也可以使用to right代替right

div {
  height: 50px;
  width: 80%;
  padding: 4px;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);
  /* What I'm trying: */
  border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0) 1;
  border-style: solid;
  border-width: 2px 0 2px 0;
}


body {
  padding: 20px;
  background-color: #fff;
}

<div>Two tone solid color top and bottom border to<br> match the two tone background</div>

我选择了蓝色，这样更容易看到。

编辑：也可以按照vibhu 的建议：

border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0);
border-image-slice: 1;