头发线

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

对于许多元素，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 className="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 className="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 className="relative hairline-b hairline-red-500 hairline-duration-300 hover:hairline-blue-500">
  ...
</div>