如何仅用Tailwind CSS类实现顶部蓝色边框式曲线（不使用CSS样式表）

你可以通过伪元素结合Tailwind定位、背景、圆角类实现需求，完全不需要额外CSS样式表，直接在HTML元素上叠加类即可：

基础实现代码 #

<div class="relative bg-white rounded-lg p-6 before:absolute before:top-0 before:left-0 before:right-0 before:h-3 before:bg-blue-500 before:rounded-b-[24px]">
  <p>这里是容器内的内容</p>
</div>

类作用拆解 #

• relative：为伪元素提供绝对定位的参照容器
• before:absolute before:top-0 before:left-0 before:right-0：让伪元素固定在容器顶部，左右完全铺满宽度
• before:h-3：控制顶部蓝色条的高度（可按需调整为h-4/h-5等）
• before:bg-blue-500：设置蓝色背景，也可用渐变类做过渡效果，比如before:bg-gradient-to-r before:from-blue-600 before:to-blue-400
• before:rounded-b-[24px]：通过底部大圆角实现曲线效果，数值越大弧度越明显，也可使用百分比如rounded-b-[12%]

进阶变体（带内凹曲线） #

如果需要曲线向内凹陷的效果，可结合before:inset-x-4让伪元素左右留出空隙，再配合大圆角：

<div class="relative bg-white rounded-lg p-6 before:absolute before:top-0 before:inset-x-4 before:h-3 before:bg-blue-500 before:rounded-b-[32px]">
  <p>带内凹曲线的顶部边框</p>
</div>

内容的提问来源于stack exchange，提问作者林廷奕