如何使边界这么长？

Question

我想在输入字段周围画一个橙色的边框，就像在图片中一样。 边框底部没有问题，但左右边框只有全高的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

我觉得你什么是左侧和右侧的颜色渐变之后。

调查访问以下链接：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+ */ 
}