如何使邊界這麼長？

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+ */ 
}