髮絲線

新增髮絲線
移除髮絲線
髮絲線顏色
髮絲線過渡時間

在許多元素中，Konsta UI 使用所謂的「髮絲線」來代替一般的 CSS 邊框。

髮絲線是使用 :after 和 :before 虛擬元素製成的。這種方法允許擁有真正的 0.5px 和 0.33px 寬的「邊框」。

新增髮絲線

要新增髮絲線，我們需要使用 .hairline-[側邊] 類別

類別
`.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-[側邊] 類別

類別
`.hairline-t-none`	移除頂部髮絲線
`.hairline-r-none`	移除右側髮絲線
`.hairline-b-none`	移除底部髮絲線
`.hairline-l-none`	移除左側髮絲線

髮絲線顏色

髮絲線顏色也可以使用 .hairline-[顏色] 類別自訂

類別
`.hairline-[顏色]`	設定髮絲線顏色

例如

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

髮絲線過渡時間

要控制髮絲線過渡時間，我們可以使用 .hairline-duration-[時間] 類別

類別
`.hairline-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>