如何将线性渐变应用于输入边框？答案

【问题标题】：How to apply linear-gradient to input border?如何将线性渐变应用于输入边框？
【发布时间】：2016-01-08 08:40:29
【问题描述】：

是否可以将线性渐变颜色应用于输入边框？
我尝试了以下方法：

input{
    border: 5pt solid linear-gradient(rgba(0, 25, 50, 0.5), rgba(0, 0, 25, 0.5));
}

上面代码的问题是你不能使用线性渐变作为颜色。
澄清一下，我不想改变输入背景颜色，只改变边框颜色。

【问题讨论】：

【解决方案1】：

您不能直接将渐变添加到border 属性作为third parameter only takes a color。相反，您必须使用下面的 sn-p 中的 border-image 属性。

注意browser support for this property is pretty low目前。为了获得更好的浏览器支持，可以使用 background-image 属性来模仿。

input {
  border-image-source: linear-gradient(rgba(0, 51, 102, 0.5), rgba(0, 0, 51, 0.5));
  border-width: 5pt;
  border-image-slice: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="text" />

【讨论】：