CSS，不再只是“样式表”
大多数人第一次接触 CSS 的时候，都会觉得它是“被动的”：给元素设定颜色、大小、位置—就像在调一张图
但随着它的发展，现在的 CSS，早已变得可计算、可逻辑、可表达动态关系；函数正是这种变化的核心之一
从最早的calc()、var()，到今天的color-mix()、sin()、path()，CSS 正在突破「静态」的定义，进入「可编程」的时代
CSS的函数世界观
CSS 的函数并非传统意义上的编程函数(可执行逻辑)，而是一种可用于计算、配色、路径控制和动态值表达的语法形式，或者说是一种值函数，即会根据输入参数返回值，可用于CSS属性值中
Tips：CSS提供了许多有意思、功能强大的函数，为了避免篇幅过于冗长，可能会分为几篇文章、按作用分类介绍，感兴趣可以持续关注，觉得有意思的话也可以点个赞鼓励一下哦(*･ω-q)
颜色值相关
颜色函数让我们能够在CSS中更灵活地使用各个色彩空间的颜色，甚至对颜色进行计算，让配色具备了数学连续性
rgb()
rgb()*这个函数相信写过CSS的都不陌生，它让我们能够使用*RGB色彩空间的规则来表达颜色
大多数人对它的使用通常是使用3个变量分别表示R、G、B通道的值，以逗号分隔来表达颜色，如下
但其实，这只是rgb()最简单的用法，逗号分隔参数的方式也是旧版的语法，其存在一定限制，如参数必须同类型，无法混合(需全部数字或全部百分比)
Tips：rgba()实际上是rgb()的别名，两者接收同样的参数
在新版的语法中，无需逗号，可以仅使用空格分隔，参数语法如下
从语法中可看出，有两种使用方式
绝对值：与常用方法类似，只是少了逗号而已；如果需要指定不透明度(Alpha)，则用/分隔
相对值：这是比较陌生的用法，大部分时候也用不上，但它体现了CSS强大的能力，该用法可以对颜色进行计算以得到新的目标颜色
首先看语法，from是关键字，是原始颜色(可以是CSS任意合法的颜色表示)，R、G、B、A表示输出的对应通道值，后半部分其实与绝对值语法差不多，但其可以根据原始颜色进行计算，在函数内可通过小写的r、g、b、alpha分别代表原始颜色的各个通道值，通过CSS提供的计算方法(如calc)进行计算
如下：
如果需要不透明度，也可以进行对应计算
通过相对值的写法，可以对颜色进行计算，如果某个通道不需要计算，也可以直接使用绝对值
通过这种可计算能力，我们可以更灵活地使用颜色，如快速提取一个颜色(可为其它颜色空间值，如hsl等)的各通道值展示
除了RGB颜色空间的函数外，CSS还提供了许多其它颜色空间的函数，以支持更丰富、更广色域的颜色设计
color()
这个函数的语法与rgb()的语法及使用类似，不同的是，它可以指定特定色彩空间；语法如下：
与rgb()的语法对比，它多了一个colorspace参数，其可用于指定特定的色彩空间，可选值如：srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50、xyz-d65
c1、c2、c3表示对应色彩空间的组件值(分量)，范围为0-1；A表示不透明度
绝对值用法如下：
可以根据自己的需要选择合适的色彩空间
相对值用法也与rgb()用法类似，只不过多了个色彩空间的参数；此外用于表示原始颜色的关键字也有细微差别
◆对于基于RGB色彩空间的，如：srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020，依旧采用r、g、b表示原始颜色
◆对于基于XYZ色彩空间的，如：xyz、xyz-d50、xyz-d65，则采用x、y、z表示原始颜色
◆alpha关键字则不变
其它色彩空间函数
除了以上函数，CSS还根据不同色彩空间提供了对应的颜色值函数
●hsl()：根据色调、饱和度、亮度和alpha来定义一个给定的颜色
●hwb()：根据色调、白度和黑度来定义一个给定的颜色
●lch()：根据亮度、色度和色调来定义一个给定的颜色
●oklch()：根据亮度、色度、色调和alpha来定义一个给定的颜色
●lab()：根据Lab色彩空间(基于人类视觉感知的模型)中的亮度、a 轴距离和 b 轴距离来定义一个给定的颜色
●oklab()：根据Lab色彩空间中的亮度、a 轴距离、b 轴距离和alpha来定义一个给定的颜色
●device-cmyk()：以独立于设备的方式定义C**MYK**颜色，目前暂无浏览器支持
用法上基本与rgb()的绝对值用法类似，只不过值需根据各色彩空间的定义选择
需注意的是，虽然CSS支持众多不同色彩空间的值表达，但具体使用时需要查看对应函数的兼容性，有些色彩空间的值函数在低版本浏览器环境可能不支持
color-mix()
有玩过颜料的应该都知道，当我们把两个颜色混合在一起，就可以(叮的一声)获得一个新的颜色，这(铛铛铛铛~)就是颜色混合
在以往，我们如果想在样式内实现混合颜色，需要借助如LESS、SASS这样的预处理器，但现在不用咯；CSS提供了一个color-mix()函数，它的主要作用就是混合两个颜色，返回一个新颜色
Tips：由于是原生CSS支持的，即我们可以实现动态的颜色混合~
大致语法如下
◆method
用于指定返回的结果颜色的色彩空间，颜色混合将在该色彩空间内进行；其值为in+空格+色彩空间关键字
可选的色彩空间如：srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、lab、oklab、xyz、xyz-d50、xyz-d65、hsl、hwb、lch、oklch
◆color1和color2：表示需要混合的两个颜色，可以是CSS合法的颜色表示
◆p1和p2：可选值，可以是0%到100%之间的百分比数值，表示对应颜色在混合时的比例；按如下规则进行：
- • 如
p1和p2都省略，那p1 = p2 = 50% - • 如
p1省略，那p1 = 100% - p2 - • 如
p2省略，那p2 = 100% - p1 - • 如
p1 = p2 = 0%，那么函数无效 - • 如
p1 + p2 ≠ 100%，那p1' = p1 / (p1 + p2)，p2' = p2 / (p1 + p2)
总结就是p1 + p2要为100%，实际使用时只需要写其中一个即可，另一个由CSS自动计算即可
CSS 的颜色函数，早已不只是“描述颜色”的语法糖，其还具备了可计算、可逻辑化的能力
在现代视觉系统中，我们不再只是“挑颜色”，而是在编排色彩逻辑—亮与暗、冷与暖、主与辅，都能用公式精准描述
