專題 C4：CSS 與設計
現代 CSS 視覺效果：玻璃擬態、漸層等
視覺效果的目標不是裝飾越多越好，而是在可讀性、效能與品牌表達之間找到穩定邊界。
玻璃擬態與漸層要有閱讀紀律
半透明面板與 backdrop blur 能把浮層從複雜背景中拉出來，但如果疊太多層，會直接傷害可讀性。
漸層也應該當作設計 token 管理，用在 hero、描邊與重點狀態，而不是全頁隨意鋪滿。
每個效果都要有性能邊界
- 大面積背景降低飽和度，小範圍強調再提高對比。
- 模糊、陰影與動畫漸層要在受限裝置上實測。
- 為複雜效果準備純色或更輕量的回退樣式。
實用輸入/輸出範例
輸入
Hero 面板覆蓋在雜訊背景圖上 需求：標題與 CTA 必須清楚可讀
輸出
panel: rgba(15,23,42,0.45) backdrop-blur: 10px border: 1px rgba(255,255,255,0.18)