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

Question

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

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

上面的代码问题在于无法使用linear-gradient作为颜色。
澄清一下，我不想改变输入背景颜色，只想改变边框颜色。

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

- BernardoLima

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" />

- Harry

---

非常感谢！对于答案和跨浏览器兼容性链接，我非常感激。这正是我所需要的！:) - BernardoLima

@BernardoLima：很高兴能帮忙 :) - Harry

如何制作圆角边框？因为“border-radius：15px;”无法工作。 - user14023416

@AlexZab，这个链接可能会对你有所帮助：https://css-tricks.com/gradient-borders-in-css/ - Mr. Programmer

不行，因为输入是一个被替换的元素，所以之前和之后都不起作用。 - Ayfri

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

这实际上创建了分层渐变。内部的渐变（适合元素内部的部分）只是白色的，因此看起来并没有什么不同。然后在其周围添加您想要的实际渐变（可以尽可能复杂或简单）。最后，在设置透明边框（具有相关的border-radius以获得圆角）之前，将背景裁剪到相应的区域。第一个背景（白色背景）被裁剪到padding-box，这意味着它占据了内容填充的所有空间。然后，第二个背景（我们想要作为边框的背景）被裁剪到边框本身的边缘。因此，我们的渐变实际上被第二个白色背景覆盖，除了边框。因此，您可以将边框的大小调整为任何厚度，并且渐变将填充它。

- H. Sellik

Answer 3

我使用了Tailwind，参考链接：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>

输入

- rouge22