效果直觀展示

核心原理：物理光學中的「凹陷」視覺錯覺

凹陷效果本質是上邊緣受光面亮 (高光) + 下邊緣背光面暗 (陰影)。在平面界面中，用兩條 1px 直線模擬：

• 上線：比背景亮 **~20% 亮度** (模擬高光面)
• 下線：比背景暗 **~20% 亮度** (模擬陰影面)

標準化操作 SOP (以背景 #555555 為例)

步驟 1：繪製上高光線

1. 單行選框工具 在目標位置劃出 1px 橫線
2. 新建圖層
3. 前景色計算：**背景亮度 -20%** → #555555 亮度約 33% → 目標 ~13% → 取色器輸入 #222222 (或直接亮度滑桿 -20%)
4. Alt+Delete 填充前景色

步驟 2：繪製下陰影線

1. 單行選框工具**向下移動 1px**
2. 新建圖層
3. 前景色計算：**背景亮度 +20%** → 目標 ~53% → 取色器輸入 #888888 (或亮度滑桿 +20%)
4. Alt+Delete 填充

步驟 3：效果驗證

兩條 1px 線疊合，瞬間獲得逼真凹陷視覺。

萬能公式速查表

背景亮度區間	上線 (高光) 亮度	下線 (陰影) 亮度	適用場景
極暗 (0-15%)	+30% (不可超過 100%)	-10% (不可低於 0%)	深色模式邊框
中暗 (15-40%)	+20%	-20%	**通用標準** (如本例 #555555)
中亮 (40-70%)	+15%	-25%	淺色模式分割線
極亮 (70-100%)	+5% (微調)	-30%	接近白色背景

效率神器：填充快捷鍵

• Alt + Delete / Option + Delete (Mac)：**填充前景色**
• Ctrl + Delete / Cmd + Delete (Mac)：**填充背景色**
• Shift + F5：填充對話框 (可選圖案/歷史記錄/內容感知)

進階變體

• 凸起效果：上線暗、下線亮 (邏輯反轉)
• 內凹/外凸組合：卡片容器邊框 = 內凹 (上亮下暗) + 外凸 (上暗下亮) 疊加
• 顏色版：非中性灰背景時，在 HSB 模式下調整 **B (亮度) ±20%**，保持 H/S 不變，獲得彩色凹陷線

實戰建議

1. **圖層分組**：將上下兩線歸入「Dividers」組，便於批量調整
2. **樣式預設**：將雙線結構存為圖層樣式或動作，一鍵套用
3. **向量化替代**：矩形工具 1px 高矩形 + 圖層樣式 (內陰影/外發光) 實現可無限縮放的凹陷線

掌握「亮度差 20% 雙像素線」鐵律，界面分割線、卡片邊框、表格間隔、輸入框邊緣，30 秒一條，專業質感手到擒來。