CSS 【详解】CSS 函数（含 calc，min，max，clamp，cubic-bezier，env，steps 等）

函数	描述	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