如何利用现代 CSS 的数学函数实现复杂样式设计？

本文共计5205个文字，预计阅读时间需要21分钟。

在CSS中，存在多种多样的函数。主要包括以下几类：

- Transform函数- 数学函数- 过滤函数- 颜色函数- 图片函数- 计数函数- 字体函数- 形状函数- 参考函数- CSS网格函数

在 CSS 中，其实存在各种各样的函数。具体分为：

• Transform functions
• Math functions
• Filter functions
• Color functions
• Image functions
• Counter functions
• Font functions
• Shape functions
• Reference functions
• CSS grid functions

本文，将具体介绍其中的 CSS 数学函数（Math functions）中，已经被浏览器大规模支持的 4 个：

• calc()
• min()
• max()
• clamp()

为什么说是被浏览器大规模支持的？因为除了这 4 个目前已经得到大规模支持的数学函数外，其实规范 CSS Values and Units Module Level 4 已经定义了诸如三角函数相关 sin()、cos()、tan() 等，指数函数相关 pow()、sqrt() 等等数学函数，只是目前都处于实验室阶段，还没有浏览器支持它们，需要给时间一点时间。