經典的 Vista/Aero 玻璃質感按鈕至今仍是 UI 設計參考標竿。本教程將詳細拆解其圖層樣式結構，從描邊、漸變疊加、內發光、內陰影、投影五大屬性參數逐一說明，助你精準掌握玻璃質感繪製精髓。

最終效果展示

圖層樣式參數完整拆解

1. 基礎形狀：圓角矩形工具繪製按鈕形狀（半徑自定），圖層填充 0% 關鍵！
2. 描邊：1px 白色，不透明度 30% 左右，位置「內部」，模擬玻璃邊緣高光。
3. 漸變疊加：線性漸變，從半透明白色到透明，角度 90°，模擬頂部光源掃過玻璃面。
4. 內發光：混合模式「螢幕」，顏色白色，來源「邊緣」，大小 10-20px，營造玻璃內部折射光暈。
5. 內陰影：混合模式「正常」，顏色白色，角度 -90°，距離 0，大小 3-5px，模擬玻璃表面微細粗糙感的頂部高光。
6. 投影：混合模式「正片疊底」，顏色黑色，角度 90°，距離 3px，大小 5px，使按鈕懸浮於介面之上。

進階變化技巧

• 頂部單高光：將內發光改為內陰影，即可控制光源方向僅保留頂部高光
• 雙高光效果：疊加內發光（底部）與內陰影（頂部）同時呈現雙側高光
• 整體換色：添加「色相/飽和度」調整圖層建立剪貼蒙版，單一圖層控制全按鈕色相

核心心法

玻璃質感關鍵在於填充 0% + 多層疊加樣式，利用圖層樣式非破壞特性，實現極高的後期修改彈性，這正是專業 UI 設計流程的核心優勢。