Question

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

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

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

Answer 1

您无法直接向border属性添加渐变作为third parameter only takes a color。相反，您必须使用border-image属性，如下面的代码段所示。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;