min()
min() 函数可以从一个逗号分隔的表达式列表中选择最小的值作为属性的值。
接受一个或多个用逗号分隔的表达式作为他的参数，数值最小的表达式的值将会作为指定的属性的值。
例如: min(8px, calc(100vw - 40px))
函数会在 8px 和 calc(100vw - 40px) 的计算值之间进行比较,选择一个当前最小的值作为width属性的最大值
max()
语法：clamp(MIN, VAL, MAX)
max() 函数可以从一个逗号分隔的表达式列表中选择最大的值作为属性的值。
接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。
例如: width: max(10vw, 4em, 80px);
宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽。简单来说，最小宽度是 80px
联合使用
根据视口宽度动态变化 border-radius
.div{
border-radius: max(
0px,
min(8px, calc((100vw - 4px - 100%) * 9999))
);
}-
我们有一个
max()函数，在0px和min()的计算值之间进行比较，并选择较大的值。 -
min()函数在8px和calc((100vw - 4px - 100%) * 9999的计算值之间进行比较,这会得到一个非常大的正数或负数。 -
9999是一个很大的数字，这样min的值都是8px
Clamp()
clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。
例如: width: clamp(100px, 100%, 200px);
- 当首选值比最小值要小时，则使用最小值。
- 当首选值介于最小值和最大值之间时，用首选值。
- 当首选值比最大值要大时，则使用最大值。