Web/UI 設計中極常見的導航欄懸停高光效果，核心僅靠「形狀圖層漸變 + 白色橢圓高斯模糊疊加 + 描邊疊加 + 雙層頂部高光 + 雙層底部高光」六大光影層疊加。本教程拆解每一層的混合模式、透明度、蒙版控制，讓你能精準控制高光的銳度、範圍與層次。

最終效果與圖層結構

逐層拆解

1. 基礎形狀： 鋼筆繪製導航背景形狀，圖層樣式「漸變疊加」設定主色調漸變。
2. 主高光帶： 新建圖層，橢圓選區填白 → 高斯模糊 → 混合模式「疊加」 → 降低不透明度 → 刪除超出形狀部分（或加蒙版）。
3. 邊框高光： Ctrl+點擊形狀層載入選區 → 編輯 > 描邊 (1-2px、白、內部) → 混合模式「疊加」、不透明度 40%。
4. 頂部高光（雙層疊加）：
   • 鋼筆勾選頂部高光區選區 → Ctrl+Alt+Shift+點擊形狀層取交集 → 白透漸變左上到右下拖曳 → 不透明度 80%。
   • 複製此層：底層模式「疊加」，頂層模式「正常」、不透明度 70%，疊加增強真實感。
5. 底部高光線（雙層疊加）：
   • 鉛筆工具 1px 白線畫底邊 → 模式「疊加」 → 加蒙版 → 黑白黑漸變左往右拉 → 產生明滅節奏。
   • 柔邊筆刷 14px 點一下底邊 → Ctrl+T 拉長 → 模式「疊加」 → 刪除溢出。
   • 同法再造一層：模式「正常」、筆刷 10px、降低透明度，形成銳利亮線。

核心原理總結

• 高斯模糊 將鋒利幾何形狀轉化為柔和光暈，模擬真實光學散射。
• 疊加模式 同時提亮高光、壓暗陰影，保留底層質感與飽和度，是光影疊加的黃金模式。
• 雙層疊加策略： 一層「疊加」負責融合，一層「正常」負責補強純亮度，兩層透明度獨立控制，擁有比單層更豐富的光影參數空間。
• 蒙版控制範圍： 所有高光層必須通過蒙版或選區限制在形狀邊界內，避免溢出破壞整潔感。

延伸應用

• 按鈕 Hover/Active 狀態
• 卡片懸停邊緣發光
• 模態框/彈窗邊框高光
• 圖標按壓凹陷/彈起光影

掌握「模糊 + 疊加 + 蒙版 + 雙層疊加」這套光影公式，任何 UI 高光效果都能靈活變通，不再依賴現成素材。