細線

新增細線
移除細線
細線顏色
細線過渡持續時間

對於許多元素，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>