如何在Tailwind css中应用径向渐变属性

Question

如何使用 Tailwind CSS 在我的网站中加入径向渐变？我将如何获得曲率边界，即波浪状边界。

我通过写

bg-radial-gradient

尝试过，但没有这样的课程。为了给出曲率，我使用了

border-b 2 rounded-[300px]

但它无法正常工作。

Answer 1

对于径向渐变，您可以考虑使用任意值类，例如：

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="h-screen bg-[radial-gradient(circle_at_50%_75%,red,blue)]"></div>

您还可以考虑添加径向渐变作为主题中的值，例如：

tailwind.config = {
  theme: {
    backgroundImage: {
      'radial-gradient': 'radial-gradient(circle at 50% 75%, red, blue)',
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="w-screen h-screen bg-radial-gradient"></div>

如果您想将任一方法与现有渐变类相结合，您可以考虑包含

var(--tw-gradient-stops)

值：

tailwind.config = {
  theme: {
    backgroundImage: {
      'radial-gradient': 'radial-gradient(circle, var(--tw-gradient-stops))',
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="h-[50vh] bg-[radial-gradient(circle_at_0%_50%,var(--tw-gradient-stops))] from-purple-200 from-10% via-green-200 via-30% to-blue-800 to-50%"></div>
<div class="h-[50vh] bg-radial-gradient from-purple-200 from-10% via-green-200 via-30% to-blue-800 to-50%"></div>

---

关于如何获得曲率边框（即波浪状边框）的其他问题，请考虑发布一个单独的问题 - Stack Overflow 上的帖子应保留一个问题。