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 here

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;

Answer 2

您可以使用以下附加代码::

添加双色调边框

div::after {
 content: "";
 position: absolute;
 height: 2px;
 width: 44px;
 right: 0;
 background: #365aa5;
 top: -2px;
}


div::before {
content: ""; 
position: absolute; 
height: 2px; 
width: 44px; 
right: 0; 
background: #365aa5; 
bottom: -2px;}

Jsfiddle在这里添加：https://jsfiddle.net/y2Ln2h86/

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

2 个答案: