設計定位

透明立體導航欄是 Web/App UI 常見組件，核心在於**圖層樣式非破壞構建玻璃質感**：內發光 (邊緣折射) + 斜面浮雕 (厚度) + 漸變疊加 (環境映射) + 投影 (懸浮感)。

成品展示

核心圖層樣式配方 (以 800×80px 圓角矩形形狀圖層為例)

樣式項	關鍵參數	視覺功能
倒角浮雕	內斜面、平滑、深度 100%、大小 8px、角度 90°/30°、高光「螢幕」白 70%、陰影「正片疊底」黑 30%	玻璃厚度與邊緣折射
描邊	1px、漸變填充 (白 30%→透明→白 10%)、位置「內部」	頂部高光邊、底部陰影邊
內發光	摻雜 0%、不透明度 20%、大小 10px、色彩「白」 、來源「邊緣」	內側邊緣微光暈
漸變疊加	線性、角度 -90°、不透明度 15%、漸變 (白 10%→透明 50%→白 5%)	環境反射條紋
投影	模式「正片疊底」黑 40%、角度 90°、距離 3px、擴展 0、大小 8px	懸浮於背景之上
色彩疊加	白色、模式「柔光」、不透明度 5%	整體通透提亮

響應式延伸

• 形狀圖層矢量特性：Ctrl+T 任意拉伸寬度，圓角/樣式自動適配，零失真。
• 狀態變體：複製圖層組 → 修改「漸變疊加」透明度/色相 → 命名「Hover/Active/Disabled」。
• 導出：右鍵形狀圖層 > 「複製 SVG」或「匯出為」PNG/WebP/@2x/@3x。

避坑指南

• 避免使用「圖案疊加」噪點紋理，會破壞玻璃純淨感；若需質感，用「濾鏤 > 雜色 > 添加雜色」建立獨立圖層模式「疊加」10%。
• 投影距離/大小隨組件懸浮高度調整：頂欄 2-3px，側邊欄 4-6px，彈窗 10-20px。
• 深色模式下：將「色彩疊加」改為黑色/柔光 5%，「描邊漸變」翻轉透明度分佈。