如何应用线性梯度输入边界

Question

是否可以对输入边框应用线性渐变颜色?
我尝试了以下方法:

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

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

JSFIDDLE:
http://jsfiddle.net/o1yhod9t/

Answer 1

你不能直接添加渐变到border属性，因为第三个参数只接受一个颜色。相反，您必须使用border-image属性，如下面的代码片段所示。

请注意，目前浏览器对该属性的支持非常低。为了更好的浏览器支持，同样可以使用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" />

Answer 2

我发现原来的答案没有提供设置边界半径的方法。你可以通过一些奇怪的CSS元素组合来实现:

input {
  padding: 0.5rem;
  border: double 3px transparent;
  border-radius: 6px;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, orange, yellow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

这有效地创建了分层渐变。内在的那个(适合元素的位)只是白色的，所以它看起来没什么不寻常的。然后在它周围加上您想要的实际梯度(这可以像复杂或简单一样)你喜欢的)。

最后，您设置了一个透明的边框(具有相关的边框半径)为了得到你的弧形角)，在裁剪背景到相关的领域。第一个背景(白色的)被剪辑到填充框，这意味着它占据了内容

的所有空间

• 填充。然后第二个背景(我们想要的边框)被剪裁到边框本身的边缘。

所以我们的渐变被另一个白色有效地覆盖了背景，除了边界。因此，您可以调整大小边框的任意厚度，渐变就会填补它。

原始来源:https://theadhocracy.co.uk/wrote/gradient-borders-with-rounded-corners-on-input-fields

Answer 3

我用的是顺风，参考:https://blog.logrocket.com/guide-adding-gradients-tailwind-css/#input-border-gradient

<div class=" h-12 w-full p-0.5 rounded-lg mt-1.5 bg-gradient-to-r from-purple-400 via-pink-600 to-indigo-500">
            <input
              class="p-2 h-full w-full rounded-lg focus:outline-none"
              type="text"
              placeholder="Enter movie/show"
            />
          </div>

输入