經典 UI 元素教程，演示如何純用「圖層樣式」+「圓形形狀」在 5 分鐘內構建具有金屬邊框、玻璃面板、指示燈、倒影、陰影的逼真黑色圓形按鈕(如電燈開關)。全程非破壞編輯，圖層樣式參數完全可複用，適合 UI 設計師建立組件庫、學習圖層樣式組合邏輯。

畫布設置

• 500×500 px，黑背景。
• 背景氛圍光：新層 700px 柔角白筆刷點一下中心 → 不透明度 30%。
  

按鈕主體結構(自下而上 5 層疊加)

1. 底盤白圓：白色正圓 → 圖層樣式：投影/內陰影/斜面浮雕/漸變疊加/描邊 — 構建金屬邊框厚度與質感。
   
2. 面板高光(柔光蒙版)：小白圓 → 蒙版黑白線性漸變(上透下實) → 模式「柔光」。
   
3. 面板倒影/高光條：白圓角矩形 → Ctrl+T 透視 → 蒙版漸變 → 降低不透明度。
   
4. 深度陰影/內部結構：大黑柔角筆刷點一下 → 白橢圓 → 圖層樣式(內陰影/投影/斜面浮雕) → 模擬內部凹陷結構。
   
5. 裝飾細節/文字/浮雕：所有圖形中心對齊 → 添加修飾圓環/文字/斜面浮雕文字。
   

最終效果

圖層樣式參數速查(核心組合)

圖層	關鍵樣式	核心參數邏輯
底盤	斜面浮雕(內斜面/平滑/深度大)+漸變疊加(金屬拉絲)+內陰影(邊緣厚度)+投影(懸浮)	模擬金屬機加工邊框
面板高光	蒙版漸變+柔光模式	非破壞融合底層質感
倒影條	透視變形+蒙版漸變+低不透明度	模擬玻璃表面環境反射
內部結構	斜面浮雕(內斜面/印章/深度)+內陰影+投影	模擬凹陷安裝座

可複用組件庫建議

• 將按鈕主體組保存為「智能對象」或「圖層樣式預設」。
• 顏色變體：改漸變疊加顏色 → 紅/綠/藍/金屬色系按鈕秒出。
• 狀態變體：複製組 → 關閉/開啟特定高光層 → 按下/懸停/禁用狀態秒切。