函數	描述	CSS 版本
attr()	返回選擇元素的屬性值。	2
calc()	允許計算 CSS 的屬性值，比如動態計算長度值。	3
cubic-bezier()	定義了一個貝塞爾曲線(Cubic Bezier)。	3
hsl()	使用色相、飽和度、亮度來定義顏色。	3
hsla()	使用色相、飽和度、亮度、透明度來定義顏色。	3
linear-gradient()	創建一個線性漸變的圖像	3
radial-gradient()	用徑向漸變創建圖像。	3
repeating-linear-gradient()	用重復的線性漸變創建圖像。	3
repeating-radial-gradient()	類似 radial-gradient()，用重復的徑向漸變創建圖像。	3
rgb()	使用紅?、綠(G)、藍(B)三個顏色的疊加來生成各式各樣的顏色。	2
rgba()	使用紅?、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色。	3
var()	用于插入自定義的屬性值。	3

calc() 計算

• 不能使用當前CSS屬性不支持的數據類型。

• 運算符前后帶單位或者帶百分號的值只能進行加減運算，不能進行乘除運算

• 除法運算斜杠右側必須是不為0的數值類型

• 加號和減號左右兩邊一定要有空格，乘法和除法符號兩側無須空格

• 可以嵌套使用

 width: calc(calc(100% -  2rem) / 6);

【實戰】自適應布局

width: calc(100% - 20px);

【實戰】根據設備屏幕設定根字號大小

html {font-size: calc(16px + 2 * (100vw - 375px) / 39);
}

【實戰】無法除盡的等比分配

width: calc(100% / 6);

【實戰】制作進度條

https://demo.cssworld.cn/new/4/5-1.php

min() 最小值

實際效果是限制最大值，適用于彈性布局

如：網頁在桌面端瀏覽器中的寬度為1024px，在移動端的寬度為100%

width: min(1024px, 100%);

max() 最大值

實際效果是限制最小值，適用于彈性布局

width: max(10vw, 5em, 80px);

clamp() 區間值

clamp(MIN, VAL, MAX)

返回一個區間范圍的值，等同于max(MIN, min(VAL, MAX))，適用于彈性布局

• 如果VAL在MIN～MAX范圍內，則使用VAL作為函數返回值；

• 如果VAL大于MAX，則使用MAX作為返回值；

• 如果VAL小于MIN，則使用MIN作為返回值。

【實戰】字體大小隨瀏覽器寬度變化

html {font-size: 16px;font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 39), 20px);
}

cubic-bezier() 貝塞爾曲線

https://blog.csdn.net/weixin_41192489/article/details/120732220

env() 環境變量

https://blog.csdn.net/weixin_41192489/article/details/120985761

steps() 跳躍動畫

https://blog.csdn.net/weixin_41192489/article/details/120732404