如何在输入元素上创建具有不同颜色和宽度/高度的重叠边框？

Question

我目前正在使用vue.js拖放Web应用程序。在此应用程序中，我们在输入HTML元素上具有一些特殊设计的边框。

设计看起来像这样：（忽略灰色垂直线。这是动态绘制的）

我尝试过类似创建同级div的操作，使它比输入大一点，在输入后面设置z-index并设置颜色。但是问题在于，浅蓝色的右边界和左边界将始终占据高度的100％。我需要大约75％或80％的东西。

“重叠”边框也可以在元素的顶部，右侧或左侧

有谁知道解决此问题的最佳方法？

Answer 1

您需要具有渐变的边框图像：

input {
  border:2px solid;
  padding:10px;
  background:pink;
}
.one {
  border-image:linear-gradient(to right, red 80%,blue 0) 2;
}
.two {
  border-image:linear-gradient(to bottom,red 70%,blue 0) 2;
}

<input type="text" class="one">

<input type="text" class="two">