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

calc() 計(jì)算

• 不能使用當(dāng)前CSS屬性不支持的數(shù)據(jù)類型。

• 運(yùn)算符前后帶單位或者帶百分號(hào)的值只能進(jìn)行加減運(yùn)算，不能進(jìn)行乘除運(yùn)算

• 除法運(yùn)算斜杠右側(cè)必須是不為0的數(shù)值類型

• 加號(hào)和減號(hào)左右兩邊一定要有空格，乘法和除法符號(hào)兩側(cè)無(wú)須空格

• 可以嵌套使用

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

【實(shí)戰(zhàn)】自適應(yīng)布局

width: calc(100% - 20px);

【實(shí)戰(zhàn)】根據(jù)設(shè)備屏幕設(shè)定根字號(hào)大小

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

【實(shí)戰(zhàn)】無(wú)法除盡的等比分配

width: calc(100% / 6);

【實(shí)戰(zhàn)】制作進(jìn)度條

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

min() 最小值

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

如：網(wǎng)頁(yè)在桌面端瀏覽器中的寬度為1024px，在移動(dòng)端的寬度為100%

width: min(1024px, 100%);

max() 最大值

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

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

clamp() 區(qū)間值

clamp(MIN, VAL, MAX)

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

• 如果VAL在MIN～MAX范圍內(nèi)，則使用VAL作為函數(shù)返回值；

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

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

【實(shí)戰(zhàn)】字體大小隨瀏覽器寬度變化

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() 環(huán)境變量

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

steps() 跳躍動(dòng)畫(huà)

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