完整演示從圓角矩形基礎形狀，到內發光、漸變疊加、描邊層樣式構建水晶質感主體；再以 1px 白線柔光模式做分隔高光，選區填色加漸變疊加做懸停狀態，最後繪製搜尋框與文字樣式，輸出精致導航 UI 組件。

成品預覽

分步構建

1. 600×140px 新文件，圓角矩形工具畫主體背景。
2. 層樣式：內發光（濾色/柔和）、漸變疊加（#5e80a3→#839db8→#b8c7d6）、描邊 #5e80a3。
3. 文字：Segoe 14pt 白色，加描邊 #53769a。
4. 矩形選框拉 1px 白線填充，複製做分隔線，上下羽化 5px 刪除邊緣，圖層模式柔光。
5. 選區填色（任意），加漸變疊加（#567595→#728fae→#b3c3d3）做按鈕懸停態。
6. 圓角矩形 2px 半徑白填充做搜尋框，層樣式：內發光（疊加）、漸變疊加（#e6e6e6→#ffffff）、描邊 #5e80a3，內輸「search」Segoe 12pt #7b7b7b。

參考圖示：