细线

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

对于许多元素，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>