Tailwind 中的边框和间距

Question

我很难在文本下方的线条上制作边框半径，而且我也有关于如何在文本和底线之间放置间距的问题。 这是我的预期输出

预期输出 -> https://ibb.co/RSKytWm

Codepen -> Codepen

代码

<div class="
    min-h-screen
    flex
    items-center
    justify-center
    py-4
    px-4
    sm:px-6
    lg:px-6
    bg-black
  ">
  <div class="max-w-lg w-full space-y-8">
    <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
      <div class="flex flex-row justify-center">
        <button class="
                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                ">
          Personal Details
        </button>
        <button class="

                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                        mr-10
                  ml-10
                ">
          Contact Details
        </button>
        <button class="
                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                ">
          Other Details
        </button>
      </div>
    </div>
  </div>

</div>

Answer 1

更新：

和OP讨论了很久，OP注意到上面没有弯曲（反正我没注意到），如下：

即使添加rounded-t-sm 也无法解决它，因为这是无法解决的，因为我们将bottom-border 添加到按钮中，解决的唯一方法是删除bottom-border 并添加<hr> 和让它看起来像线条。

更新代码：

<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
    <div class="max-w-lg w-full space-y-8">
        <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
            <div class="flex flex-row justify-center">
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
                    Personal Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular mr-10 ml-10">
                    Contact Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
                    Other Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                
            </div>
        </div>
    </div>
</div>

更新结果：

Playground

旧答案

不确定添加border-radius有什么困难，尝试添加rounded-sm，它会起作用。

如果您想在文本和行之间添加一些空格，请尝试在按钮上添加一些padding，我认为py-2 会满足您的需求。

代码：

<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
    <div class="max-w-lg w-full space-y-8">
        <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
            <div class="flex flex-row justify-center">
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
                    Personal Details
                </button>
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white mr-10 ml-10">
                    Contact Details
                </button>
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
                    Other Details
                </button>
            </div>
        </div>
    </div>
</div>

结果：

Playground