提问人：Ouka Miyuki 提问时间：9/22/2023 更新时间：9/22/2023 访问量：50
如何使用 Tailwind CSS 创建伪边框内容
How to create pseudo border content with Tailwind CSS
问：
因此，我正在尝试在 Tailwind CSS 中的导航菜单上制作顶部和底部边框，我尝试使用 and，但边框和背景没有相互拆分。我想知道我是否可以使用伪元素使用它，或者有没有更好的方法？谢谢！border-b-4border-t-4bg-indigo-500
这是我的代码：
'inline-flex items-center px-1 pt-1 border-b-4 border-t-4 border-indigo-400 text-sm font-medium bg-indigo-500 leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
我希望它看起来像这样：
但相反，这就是我得到的：
答：
1赞
Vivek Tarsariya
9/22/2023
#1
你差不多完成了。我写了一些步骤供您遵循。我在下面添加了工作示例，请检查一下。
- “添加标签”按钮
<span> - 为标签添加和着色
paddingbackground<span> - remove from 和 add 或 in 标记。
background<button>paddingborder<button>
<button type="button"
class="inline-flex items-center py-2 border-b-4 border-t-4 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out">
<span class="p-3 bg-indigo-500">Click Me</span>
</button>
评论
0赞
Ouka Miyuki
9/23/2023
非常感谢，它正在工作，现在我只需要弄清楚如何在每个导航上放置一个活动条件
评论