深色模式
邊框 Border
邊框用來界定容器範圍、分隔內容。顏色全部對接 Element Plus 的 --el-border-color 系列,深色模式自動同步。
圓角與陰影在哪裡
圓角 Radius 與陰影 Shadow 屬於同一組視覺 token,收錄在 間距與圓角 Layout 頁,這裡不重複。
邊框色階
由深到淺共五階。預設外框用 border-base;越往內、越次要的分隔線用越淺的階:
| Tailwind | 變數 | 色值 | 用途 |
|---|---|---|---|
border-dark | --el-border-color-dark | #d4d7de | 需強調的外框、hover 邊框 |
border-base | --el-border-color | #dcdfe6 | 預設:輸入框、卡片外框 |
border-light | --el-border-color-light | #e4e7ed | 區塊之間的分隔 |
border-lighter | --el-border-color-lighter | #ebeef5 | 表格內線、清單分隔 |
border-extra-light | --el-border-color-extra-light | #f2f6fc | 最淺:大面積留白中的細分隔 |
border-dark · #d4d7de
border-base · #dcdfe6
border-light · #e4e7ed
border-lighter · #ebeef5
border-extra-light · #f2f6fc
上方為「實心色票」(直接以該邊框色填滿),方便看清顏色本身;實際使用時邊框只有 1px,視覺上會更淡。
邊框粗細與樣式
- 實線(預設)粗細 1px,對接
--el-border-width;不用更粗的實線,層次交給顏色與陰影 - 虛線沿用 Element Plus 慣例為 2px(
border-dashed border-2),用於次要或暫時性的分隔(如拖放區、待補區塊)
實線 solid · 1px(預設)
虛線 dashed · 2px
分隔線的選擇
一整條分隔內容的線,優先用 Divider 分割線 元件(它已內建間距與深色模式);邊框色階是給「容器外框」用的。
Do / Don't
| ✅ Do | ❌ Don't |
|---|---|
外框用 border-base | 隨手挑 gray-* 當邊框色 |
| 越次要的分隔用越淺的階 | 每條線都用最深的邊框 |
| 實線 1px、虛線 2px(EP 慣例) | 用 3px 以上粗實線強調 |
| 整條分隔用 Divider 元件 | 到處手刻 border 當分隔線 |
給工程師
- 邊框色:
border-base/border-light/border-lighter/border-extra-light/border-dark(對應--el-border-color*) - 粗細:實線
border(1px);樣式:預設實線、虛線用border-dashed border-2(EP 慣例虛線為 2px) - 這些 class 由
@accuhit/ui的 Tailwind preset 映射到 EP 變數,深色模式自動同步——不要寫死色碼 - 圓角
rounded-el*、陰影shadow-el*見 間距與圓角 Layout