Ambient CSS 最大嘅改變係將 UI 表面當作真實物料嚟處理。傳統嘅 CSS 陰影階只係裝飾，卡片用 shadow-lg、掣用 shadow-sm，兩個元素之間並無物理關係。呢個工具庫引入咗 key light 同 fill light 兩盞光源嘅概念，所有陰影、邊緣高光、表面漸層都由同一組 CSS 自訂屬性推算出嚟。當你改變容器嘅光線方向，底下每一個子元素都會即時跟住調整，唔使逐個改。
引擎將每個元素拆成五層 box-shadow 合成：方向性嘅 drop shadow、面對光源嘅 fillet 高光、背光邊嘅 fillet 暗影、斜面嘅 chamfer 高光同暗影，加埋材質表面嘅漸層。表面類型分 flat、concave、convex 三種弧度，邊緣可以揀 chamfer、fillet 或 groove，仲有 matte、shiny、glass 呢幾種材質，最後用 elevation 0–3 控製投影高度。所有參數都係用 Blender raytrace 嘅結果做標定。
對一般開發者嚟講，安裝同整合都幾直接。純 CSS 版可以喺 HTML 直接掛入，框架版本分別支援 Tailwind、PureCSS、React 同 React-Bootstrap。命名空間用 .ambient 做容器、再用 .amb-surface、.amb-chamfer-2 等工具類調整細節，常用距離值跟 12／20／32 mm 嘅間距比例，避免頁面入面出現零碎數值。Demo 頁面將 Blender raytrace 同 live DOM 並排展示，幾容易睇出差距。
重點摘要
- 將 UI 視為真實光照環境，所有陰影、高光、表面漸層由統一光源參數衍生
- 每個元素由五層 box-shadow 合成，包含 drop shadow、fillet 同 chamfer 嘅高光與暗影
- 表面類型（flat／concave／convex）、邊緣類型（chamfer／fillet／groove）、材質（matte／shiny／glass）同 elevation 0–3 可自由組合
- 參數以 Blender raytrace 結果做物理標定，唔係靠肉眼調較 blur 值
- 支援 PureCSS、Tailwind、React、React-Bootstrap 幾種整合方式
對需要管理大量卡片、面板、控制台介面嘅團隊嚟講，呢套系統可以避免每個設計師各自調較 shadow 嘅問題。對於追求像素級一致嘅硬件風格介面、儀表板或產品頁，效果會特別明顯；但若然你嘅介面本來就偏好扁平設計、唔需要表面弧度嘅呈現，呢層物理光照帶嚟嘅額外 box-shadow 開銷同學習成本就未必值得。