中段顺风垂直边界

Question

顺风边框文档清晰明了，可以做上、下、右、左边框。您可以使用高度特征进行垂直操作，通过宽度进行水平操作，这是可以理解的。问题是，我如何找到div的中心，并在上面/底部创建一个垂直边框？右边和左边也是一样。

    <div class="p-10">
      <div className="p-10 mx-auto w-fit border-t border-pink-200 grid grid-cols-3 gap-4">
        
        <div class="p-5 m-5 border border-sky-200">
          <h1 className="text-3xl font-bold underline">Hello world!</h1>
        </div>

        <div class="p-5 m-5 border border-sky-200">
          <h1 className="text-3xl font-bold underline">Hello world!</h1>
        </div>

        <div class="p-5 m-5 border border-sky-200">
          <h1 className="text-3xl font-bold underline">Hello world!</h1>
        </div>
      </div>
    </div>

目前网站设计的一张照片是https://i.stack.imgur.com/S2cbD.png，黄线是我用工具画的，是我所期望的边框。

有办法在顺风上做这些吗？谢谢!

Answer 1

您可以使用伪元素创建它，如下所示：

before:w-px before:h-16 before:bg-yellow-400 before:absolute before:left-1/2 before:-translate-x-1/2 before:bottom-full

​

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

<div class="p-10">
  <div class="p-10 mx-auto w-fit border-t border-pink-200 grid grid-cols-3 gap-4">

    <div class="p-5 m-5 relative border border-sky-200 before:w-px before:h-16 before:bg-yellow-400 before:absolute before:left-1/2 before:-translate-x-1/2 before:bottom-full after:h-px after:w-16 after:bg-yellow-400 after:absolute after:top-1/2 after:-translate-y-1/2 after:left-full">
      <h1 class="text-3xl font-bold underline">Hello world!</h1>
    </div>

    <div class="p-5 m-5 border border-sky-200">
      <h1 class="text-3xl font-bold underline">Hello world!</h1>
    </div>

    <div class="p-5 m-5 border border-sky-200">
      <h1 class="text-3xl font-bold underline">Hello world!</h1>
    </div>
  </div>
</div>

​