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