任務路徑 / 從輸入到結果
如何搭建玻璃擬態面板
- 01
選擇玻璃色調
用「玻璃色調」選色。預覽會把面板懸浮在兩個彩色圓球之上，讓你像真實介面一樣，在複雜背景上判斷材質效果。
- 02
設定不透明度與模糊
「表面不透明度」範圍為 0.05 到 0.8——越低越透明；「背景模糊」範圍為 0 到 40 px，用來柔化面板後方的一切。
- 03
調整飽和度、邊框與圓角
「飽和度」（50–200%）讓背景更濃或更淡；「邊框不透明度」（0–0.8）用色調顏色描邊；「圓角半徑」（0–48 px）控制面板的圓潤程度。
- 04
平衡材質
表面控制項相互制衡：不透明度低時需要更大的模糊才能讀作玻璃；飽和度高於 100% 可以防止複雜背景在淺色著色後顯得發白。預設材質——白色著色、0.22 不透明度、18 px 模糊、140% 飽和度——是經過驗證的中點。
- 05
複製面板 CSS
點「複製 CSS」，或點「下載 .css」儲存 toolars-glass-panel.css。.glass-panel 規則組合了 rgba 背景、帶 -webkit- 孿生行的 backdrop-filter、1 px 色調邊框和一層柔和陰影。
- 06
規劃降級方案
如果瀏覽器不支援 backdrop-filter，rgba 背景、邊框和陰影仍會顯示。將「背景模糊」設為零只能粗略觀察後備效果，因為飽和度濾鏡仍可能生效。請在目標瀏覽器測試；文字需要更多對比度時可提高「表面不透明度」。