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

Question

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

设计看起来像这样:(忽略灰色垂直线。这是动态绘制的)

我尝试过创建同级 div 之类的方法，使其比输入大一点，在输入后面设置 z-index 并设置颜色。但问题是浅蓝色的 border-right 和 border-left 总是占据 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">