Tailwind CSS 是一个很流行的 CSS 框架，它的特点是使用类名来实现样式设计，可以节省很多时间和精力。在这篇文章中，我们将介绍如何使用 Tailwind CSS 制作带弧形效果的按钮。
步骤
第一步：创建 HTML 结构
首先，我们需要创建一个按钮，简单的 HTML 结构如下：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">按钮</button>
这个按钮使用了 Tailwind 的类来设置背景色、文字颜色、字体加粗、内边距和圆角等属性。但是它还没有弧形效果。
第二步：添加背景图案
为了制作按钮的弧形效果，我们可以添加一个 SVG 背景图案。可以使用任何图形编辑软件，比如 Adobe Illustrator 或者 Sketch 来制作背景图案。
这里我们使用了一个及其简单的圆弧形状，SVG 代码如下：
<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"> <path fill="#fff" fill-opacity="1" d="M0,256L80,234.7C160,213,320,171,480,181.3C640,192,800,256,960,272C1120,288,1280,256,1360,240L1440,224L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path> </svg>
我们把这个 SVG 背景图案作为按钮的背景，并将其固定在左边。在 Tailwind 中，可以使用 bg-fixed 类来实现这个效果。同时也需要给背景图案一个宽度和高度，以及一个 z-index 值，以覆盖在按钮之上。
<button class="bg-blue-500 bg-fixed bg-left text-white font-bold py-2 px-4 rounded-full" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 1440 320%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath fill=%22%23fff%22 fill-opacity=%221%22 d=%22M0,256L80,234.7C160,213,320,171,480,181.3C640,192,800,256,960,272C1120,288,1280,256,1360,240L1440,224L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z%22%3E%3C/path%3E%3C/svg%3E') !important; width: 120px; height: 40px; z-index: 1;">
按钮
</button>接下来，我们的按钮看起来就像这样：
总结
在这篇文章中，我们介绍了如何使用 Tailwind CSS 制作带弧形效果的按钮。我们通过添加一个 SVG 背景图案，并将它作为按钮的背景实现了弧形效果。这个技巧可以用于任何按钮或其他元素，同时，它也可以很容易地使用在其他 CSS 框架和纯 CSS 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3475c83d39b4881742d07