視覺樣式詞條 3-31

邊框Border

也常叫做：邊框、外框、Border

你可能會這樣說

淺色背景上放淺色卡片，彼此糊在一起；加了實線邊框又覺得笨重，想要更輕的分隔方式。

邊框是元素的最外圈線，負責分界與收邊。它最常見的問題是被用得太重：其實1px 的淺灰細線就足以分出卡片，畫面輕很多。

淺色介面的流行做法是「淡邊框＋淡陰影」同時上：邊框負責輪廓清楚、陰影負責一點高度，兩者都低調，質感就出來。

變化很多：虛線表示草稿狀態、只留底線模擬輸入欄、粗左線當引言。跟 AI 說位置與樣式（「只留下框 2px」）就能精準做出。

淡邊框負責輪廓、淡陰影負責高度，兩者都低調，質感就出來。

邊框粗細線條樣式邊框顏色

多數時候 1px 淺灰就足以分出卡片；粗一點的色框留給強調，例如引言的左側線。

圖 3-31　粗細、樣式、顏色——邊框三要素，拉到滿意為止。

中文就可以

請用邊框整理這頁的分隔感：
卡片加 1px 淺灰邊框，搭配很淡的陰影，兩者都要低調。
表單輸入框只留 2px 底線，聚焦時換成主色。
引言區塊用左側 4px 主色粗線。
所有邊框顏色統一引用同一個變數，不要深淺不一。