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

如何使边界长一半？

1 个答案: