Windows Vista/Aero 風格的毛玻璃半透明效果，曾引領一代 UI 設計潮流。本教學演示如何在 Fireworks 中純矢量/濾鏡方式還原毛玻璃半透明、磨砂質感、高光邊緣、內發光、噪點顆粒五大核心特徵，構建可直接切圖/導出 CSS 參考的高保真 UI 組件。

效果預覽

步驟詳解

1. 畫布與背景環境

• 新建文件，導入豐富細節背景圖 (風景/幾何圖案/漸變)，驗證毛玻璃透視效果。

2. 主體容器：圓角矩形 + 垂直漸層

• 圓角矩形工具繪製容器主體 (如 400×300px，圓角 8px)。
• 填充垂直線性漸層：頂部 #FFFFFF 15% → 中部 #FFFFFF 8% → 底部 #FFFFFF 15% (白色漸層模擬玻璃厚度折射)，整體不透明度 60-70%。

3. 頂部高光帶 (玻璃邊緣折射亮帶)

• 複製主體容器 → 原位貼上 → 刪除下半部 (保留頂部 20-30px)。
• 填充垂直線性漸層：頂部 #FFFFFF 40% → 底部 #FFFFFF 0%，不透明度 50%，混合模式「疊加」。

4. 核心毛玻璃質感：噪點 + 羽化 + 蒙版

1. 新建圖層，橢圓工具繪製圓形 (略大於容器)，填充線性漸層 (白→透)，羽化 10px。

2. 添加「濾鏡 → 雜點 → 新增雜點」：量 8px，單色勾選，模擬磨砂顆粒。

3. 選中容器主體路徑 → 在雜點圓形上 Ctrl+Shift+V (或右鍵 → 編輯 → 貼入為蒙版) → 雜點圖案被容器形狀裁切，形成磨砂質感區域。

5. 內發光邊緣 (玻璃邊緣折射增亮)

• 同樣流程：矩形 → 放射狀漸層填充 → 羽化 → 添加雜點 8px → 貼入為蒙版 → 置於容器內部邊緣，混合模式「疊加」，不透明度 40%。

6. 內容區適配 (如 MSN 聯繫人頭像區)

• 繪製橢圓區域，填充「緞光」漸層 (模擬織物/軟質 UI 區域)。
• 同樣：羽化 + 雜點 + 蒙版裁切 → 獲得區域性毛玻璃質感差異化。

7. 標題欄分隔高光線

• 直線工具繪製 1px 白線置於標題欄底部，不透明度 30%，混合模式「疊加」，模擬玻璃分隔邊緣折射亮線。

CSS 參考輸出 (設計交付開發)

.frosted-glass {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.4),   /* 頂部高光 */
    inset 0 -1px 0 rgba(0,0,0,0.05),       /* 底部陰影 */
    0 4px 16px rgba(0,0,0,0.1);            /* 外投影 */
}
.noise-overlay::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,");
  opacity: 0.03; pointer-events: none;      /* CSS 噪點模擬 */
}

元件化交付

將容器主體、高光帶、磨砂蒙版、內發光、投影、分隔線存為「毛玻璃面板」元件，9 切片縮放區，屬性暴露：`寬高`、`圓角`、`不透明度`、`模糊半徑`、`噪點強度`、`主題色偏移`，設計師調參數、開發者抄 CSS，零溝通成本交付。