細線

新增細線
移除細線
細線顏色
細線轉換持續時間

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>