CSS 雖然只是樣式語言，但也提供了一些好用的函式，讓使用者能更有彈性的設計畫面，這個單元會介紹「數學計算」相關的 CSS 函式，例如 calc()、min()、max()、minmax()、三角函數等等，透過動態計算的方式，取得並設定動態改變的數值。

影片重點：

• 00:01:41 calc() 基本數學運算
• 00:05:38 round() 四捨五入
• 00:07:48 clamp() 限制數值範圍
• 00:09:19 max()、min() 最大值與最小值
• 00:11:36 hypot() 參數平方和
• 00:12:56 mod()、rem() 餘數
• 00:14:14 exp()、log() 指數與對數
• 00:15:34 pow()、sqrt() 次方與平方根
• 00:16:34 sin()、cos()、tan()、asin()、acos()、atan()、atan2() 三角函數
• 00:18:48 maxmin() grid 網格排版最大值與最小值
• 00:21:33 repeat() grid 網格排版重複設定

相關參考：

• 教學文：CSS 數學計算 ( 函式類型 )
• 影片連結：https://www.youtube.com/watch?v=lWZejF0RVbI

後記

今天我參賽的另外一個系列「關於那些有趣的 CSS 效果」完賽啦！所以這篇就不說太多廢話，直接給大家看看我那邊完賽的心得吧：

CSS，依然讓我怦然心動！( 純純的連續 36 天完賽心得 )

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html