建模邏輯：同心圓環系統 + 指針幾何 + 光影分層

鬧鐘結構本質是同心圓環疊加：外殼→玻璃→表盤→刻度環→指針→鬃鈴。本教學採用「路徑偏移 + 漸層網格 + 混合模式」非破壞流程，每個圓環獨立控制材質，指針用幾何布林運算，最終合成極具金屬/玻璃質感的寫實鬧鐘。

步驟 1：同心圓環系統建立

1. 橢圓工具 (L) 按 Shift 畫 200 px 正圓（最外殼），無填色、描邊 4 pt、色 #444（深灰）。
2. 物件 → 路徑 → 偏移路徑：-8 px → 得第二圓環（玻璃邊框），描邊 2 pt、漸層描邊（內側白→外側透明）。
3. 再偏移 -10 px → 第三圓環（表盤基底），填徑向漸層：中心淺灰 #f0f0f0 → 邊緣深灰 #666。
4. 再偏移 -12 px → 第四圓環（刻度環），無填描邊，待刻度生成。
5. 再偏移 -15 px → 第五圓環（指針旋轉基準），無填無描，作為指針旋轉中心參考。

步驟 2：材質渲染——漸層網格與混合模式

外殼金屬質感

最外環：外觀面板添加填色 → 線性漸層 135°：#555 → #ddd → #555 → #ddd → #555（五停點模擬環狀高光帶）。添加第二填色：顆粒紋理（強度 10、對比 30、水平條紋）、疊加 8%。描邊保留 4 pt #333。

玻璃折射與高光

第二環：填色徑向漸層（中心透明 → 環狀白 透明度 30% → 邊緣透明），混合模式「螢幕」。添加描邊漸層（內白外透），模擬玻璃厚度折射亮邊。

表盤深度與刻度

1. 第三環（表盤基底）：徑向漸層 #f5f5f5 → #ddd → #aaa，模擬微凹球面。
2. 刻度生成：直線工具畫 15 px 短線（12 點位置）、5 px 短線（其餘 48 點），描邊 1.5/0.8 pt、色 #333。旋轉工具 (R) Alt+點擊中心 → 30°/6° 複製 → Ctrl+D 完成 60 刻度。
3. 數字 12/3/6/9：文字工具輸入、建立輪廓、置於對應刻度外側，填 #333。

步驟 3：指針系統——幾何精準與陰影分離

1. 時針： 矩形 10×80 px → 直接選取頂部兩錨點向內移動形成尖頭 → 填金屬漸層（同外殼）、描邊 0.5 pt #333。
2. 分針： 矩形 6×120 px → 同尖頭處理 → 填金屬漸層、稍亮。
3. 秒針： 矩形 2×140 px → 頂端三角形配重（紅 #ff0000）、尖頭白。描邊無。
4. 中心軸蓋： 12 px 正圓、金屬漸層、內發光（正片疊底、#333、3 px）。
5. 指針陰影（關鍵）： 複製三支指針 → 物件 → 路徑 → 輪廓化描邊 → 填亮灰 #ccc、透明度 40%、正片疊底 → 群組 → 垂直下移 3 px、水平右移 2 px。陰影隨指針旋轉同步動作（動畫時）。

步驟 4：鬃鈴與支架——布林運算與漸層網格

1. 鬃鈴：兩個 55 px 正圓，左右對稱置於頂部。鋼筆工具勾勒連接支架（矩形圓角 30 px 高 80 px）。
2. 支架漸層：線性 90°：#ddd → #888 → #ddd → #888（四停點），漸層工具拖曳 45° 角度。
3. 鬃鈴球體：徑向漸層（同外殼邏輯），加高光月牙形（路徑查找器「交集」得月牙、白→灰徑向漸層、白透明度 0%）。
4. 支架底部陰影：複製支架底部矩形 → 路徑查找器「相交」得接觸面 → 填灰、正片疊底、透明度 30%。

步驟 5：整體合成與動畫就緒輸出

1. 圖層架構：背景 → 投影群組 → 支架群組 → 鬃鈴群組 → 外殼群組 → 玻璃群組 → 表盤群組 → 指針群組 → 指針陰影群組 → 高光裝飾群組。
2. 整體投影：複製外殼群組 → 填黑 → 高斯模糊 10 px → 正片疊底 25% → 壓扁 50% → 置於背景上方。
3. 動畫輸出：將指針群組（含陰影）分別存為符號，匯出 SVG。CSS 關鍵幀：時針 12h/圈、分針 1h/圈、秒針 1min/圈，`transform-origin` 設為中心軸蓋中心。
4. 互動擴充：配合 JS 獲取真實時間 `new Date()` 驅動指針旋轉，做成可嵌入網頁的真實運作向量鬧鐘。