发际线

添加发际线
删除发际线
发际线颜色
发际线过渡持续时间

对于许多元素，Konsta UI 使用所谓的“发际线”来代替普通的 CSS 边框。

发际线由 :after 和 :before 伪元素创建。这种方法允许拥有真正的 0.5px 和 0.33px 宽度的“边框”。

添加发际线

要添加发际线，我们需要使用 .hairline-[side] 类

类
`.hairline-t`	添加顶部发际线
`.hairline-r`	添加右侧发际线
`.hairline-b`	添加底部发际线
`.hairline-l`	添加左侧发际线

注意，发际线使用 absolute 定位，因此请确保具有发际线的元素具有 absolute、fixed 或 relative 定位

例如

<!-- add bottom hairline to the element -->
<div class="relative hairline-b">...</div>

删除发际线

要删除发际线，我们需要使用 .no-hairline-[side] 类

类
`.hairline-t-none`	删除顶部发际线
`.hairline-r-none`	删除右侧发际线
`.hairline-b-none`	删除底部发际线
`.hairline-l-none`	删除左侧发际线

发际线颜色

发际线颜色也可以使用 .hairline-[color] 类进行自定义

类
`.hairline-[color]`	设置发际线颜色

例如

<!-- add bottom hairline with red-500 color to the element -->
<div class="relative hairline-b hairline-red-500">...</div>

发际线过渡持续时间

要控制发际线过渡持续时间，我们可以使用 .hairline-duration-[duration] 类

类
`.hairline-duration-[duration]`	设置发际线过渡持续时间

例如

<!-- add bottom hairline with red-500 color to the element, and change its color to blue-500 on hover -->
<div
  class="relative hairline-b hairline-red-500 hairline-duration-300 hover:hairline-blue-500"
>
  ...
</div>