如何使边框变长一半？

Question

我想像图片中那样在输入字段周围制作一个橙色边框。 border-bottom 没问题，但左右边框只有全高的 50%。我该怎么做？

Here you see what I would like to reach.

下面的代码是我做的。感谢@craig

 .input{
 -webkit-border-image:linear-gradient(to top,black, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%) 1 50%;
    -moz-border-image:linear-gradient(to top,black, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%) 1 50%;
    -o-border-image:linear-gradient(to top,black, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%) 1 50%;
    border-image:linear-gradient(to top, black, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%) 1 50%;
    }

<div>
  <input name="email" class="input" type="email" required=""placeholder="Email">
</div>

Answer 1

我想你想要的是左右两侧的颜色渐变。

调查以下内容link：https://css-tricks.com/examples/GradientBorder/

在上面的示例中，他们使用 100% - 我会尝试 50%；

input {
  -moz-border-image: -moz-linear-gradient(top, #f49c30 0%, #f49c30 50%, #f2f2f2 50%, #f2f2f2 100%); /* FF3.6-15 */
  -webkit-border-image: -webkit-linear-gradient(top, #f49c30 0%,#f49c30 50%,#f2f2f2 50%,#f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */
  border-image: linear-gradient(to bottom, #f49c30 0%,#f49c30 50%,#f2f2f2 50%,#f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

如何使边框变长一半？

How to make a border half so long?

html

css

border