如何使用 Tailwind CSS 创建 5 色线性渐变边框？

Question

如何制作这个 5 色线性渐变边框，就像这张图片一样？还有下面这行吗？

我已经尝试过使用这段代码。

bg-gradient-to-r from-[#83C59B] via-[#FCF09A] to-[#71CAEE]

但无法设置5种颜色。

现在我想要一个使用 Tailwind CSS 的 5 色线性渐变边框。

Answer 1

当您使用任意值时，您可以将任意数量的颜色传递给

from

、

via

或

to

中的任何一个。按住

bg-gradient-to-r

指定方向。所以这些都是有效的：

from-[#83C59B] // one color
from-[#83C59B,red,green] // multiple
via-[#FCF09A,red,green,blue,magenta,gray,pink,violet] // a lot of colors
to-[#83C59B,red]

如果您未指定

from

或

to

，则默认为

transparent

。

via

是可选的

演示

Answer 2

首先，

bg-gradient-to-r

设置的是背景图像，而不是边框图像，所以无论如何它都无法满足您的需要。我认为边框图像没有预定义的 Tailwind 类。

您必须定义自己的自定义主题/插件或使用任意属性。

例如这个任意属性：

<div class='[border-image:linear-gradient(to_right,#83C59B,#FCF09A,red,purple,#71CAEE)_1]'> </div>

相当于：

border-image: linear-gradient(to right, #83C59B, #FCF09A, red, purple, #71CAEE) 1;

Answer 3

<button class="border-gradient p-3 text-white bg-black">Press</button>

当我尝试时，

对我有用。 （调整图像的颜色）。风格部分是

<style>
  .border-gradient {
    border-image: linear-gradient(to right, #83C59B, #FCF09A, #71CAEE, #111111, #880088) 1;
    border-style: solid;
    border-width: 5px;
  }
</style>