CSS函数你知道多少？

css中给我们提供很多函数来辅助我们完成css样式的设置，那么你知道CSS函数究竟有多少呢？如何去使用这些函数？本文首先将会对于CSS中已有函数做一个总结性整理，之后会将类似设置函数放在单篇中介绍并提供使用的源码，你可以通过本篇文章链接访问，若存在函数不全、分类存疑又或者使用有误的情况，请评论区告诉我，我将会抽时间进行补充、调整、修改。

CSS函数都有哪些？

由于CSS函数过多，我这里根据它的用途将其分类总结，就不和MDN上一样通过字母顺序来排版了。大致分为：科学计算类、滤镜类、图形图像类、颜色设置类、动画类、其他类。

1、科学计算函数

• abs()：获取参数绝对值。
• acos()：三角函数，反余弦函数。
• asin()：三角函数，反正弦函数 。
• sin()：三角函数，正弦函数 。
• atan()：三角函数，反正切函数。
• atan2()：三角函数，使用两个参数 x 和 y 的反正切函数。
• cos()：三角函数，余弦函数。
• sqrt()：平方根函数。
• tan()：三角函数，正切函数 。
• calc()：允许计算 CSS 的属性值，支持数字、vw、vh、百分比
• clamp()：获取上限和下限之间的中间值。
• exp()：自然对数为底数的指数曲线。
• hypot()：参数平方和的平方根函数。
• log()：实验性。
• max()：从一个逗号分隔的表达式列表中选择最大的值作为属性的值。
• min()：从一个逗号分隔的表达式列表中选择最小的值作为属性的值。
• minmax()：定义了一个长宽范围的闭区间。
• mod()：实验性，阶梯值函数。
• pow()：开方。
• rem()：实验性，阶梯值函数。
• round()：实验性，阶梯值函数。
• fit-content()：元素尺寸接近于内容的尺寸。

2、滤镜类函数

• blur(radius)：为图像设置高斯模糊，默认值为 0，单位为px、rem、em、ex、ic、rlh、vh、vw、vi、vmin、vmax、vb、cm、mm、in、pc等，值较大越模糊
• brightness(number)：number越大图像越亮，number不能取负值，可以是整数也可以是百分比。
• drop-shadow()：为图像添加阴影效果
• grayscale()：将图像转换为灰度图像，默认值为 0%，表示原始图像；100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值
• hue-rotate(deg)：图像色相旋转
• invert()：反转图像
• opacity()：设置不透明度
• saturate()：调整饱和度
• sepia()：图像转为棕褐色
• contrast()：调整对比度，默认值为 100％，代表原始图像；0％ 将使图像完全变黑；当值超过 100％ 时图像将获得更高的对比度。

3、图形图像类函数

• linear-gradient()：将线性突变设置为背景图像。定义至多两种色彩（从上到下）
• radial-gradient()：用径向渐变创建图像。
• conic-gradient()：定义了一个圆锥渐变。
• repeating-linear-gradient()：用重复的线性渐变创建图像。
• repeating-radial-gradient()：用重复的径向渐变创建图像。
• repeating-conic-gradient()：重复的圆锥渐变。
• grayscale()：用于对图像应用滤镜以设置图像的灰度。
• image()：指定图像或者图像代替，与url()性能相似，比url减少了一些性能
• image-set()：可以保证图片在不同分辨率设备上的适配,能根据不同的设备类型展示不同的图片。
• inset()：创立一个矩形区域来屏蔽它所利用的元素
• path()：创立一个自定义区域来屏蔽它所利用的元素
• element()：以将元素当作图片渲染
• url()：应用URL来加载内部资源
• polygon()：创立一个多边形区域来屏蔽它所利用的元素
• repeat()：表示轨道列表的重复片段。
• circle()：创立一个圆形区域来屏蔽它所利用的元素
• cross-fade()：背景半透明
• cubic-bezier()：三次方贝塞尔曲线
• ellipse()：用于在椭圆形图片或其他任何图形周围创建浮点数文本。 
• paint()：定义使用 PaintWorklet 生成的图像值。

4、颜色设置函数

• color()：使用 3 种值定义:关键字、RGB 立体坐标系、HSL 圆柱坐标系。
• device-cmyk()：CMYK 代表 Cyan、Magenta、Yellow 和 Key，它们与打印机中的墨水颜色相匹配，使用空格来分隔参数，也可以添加alpha值来设置透明度。
• hsl()：使用色相、饱和度、亮度来定义颜色。
• hsla()：使用色相、饱和度、亮度、透明度来定义颜色。
• hwb()：容许通过指定色彩的色调、白度和黑度重量以及alpha值来指定色彩值。
• lab()：亮度以及决定色调的 a和b值。
• lch()：亮度、色度、色调。
• rgb()：使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。
• rgba()：使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

5、动画类函数

• steps()：阶梯函数。
• matrix()：以一个含六值的(a,b,c,d,e,f)变换矩阵的模式指定一个2D变换，相当于间接利用一个[a,b,c,d,e,f]变换矩阵。
• matrix3d()：定义 3D 转换，应用 16 个值的 4×4 矩阵。
• perspective()：为 3D 转换元素定义透视视图。
• rotate()：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义。
• rotate3d()：定义 3D 旋转。
• rotatex()：沿着 X 轴的 3D 旋转。
• rotatey()：沿着 Y 轴的 3D 旋转。
• rotatez()：沿着 Z 轴的 3D 旋转。
• scale()：指定对象的2D scale（2D缩放）。
• scale3d()：指定对象的2D scale（3D缩放）。
• scalex()：指定对象X轴的（程度方向）缩放。
• scaley()：指定对象Y轴的（垂直方向）缩放。
• scalez()：指定对象Z轴的（垂直方向）缩放。
• skewx()：指定对象X轴的（程度方向）扭曲。
• skewy()：指定对象Y轴的（垂直方向）扭曲。
• translate()：指定对象的2D translation（2D平移）。
• translate3d()：指定对象的3D translation（3D平移）
• translatex()：指定对象（3D）X轴（程度方向）的平移。
• translatey()：指定对象（3D）Y轴（垂直方向）的平移。
• translatez()：指定对象（3D）Z轴（垂直方向）的平移。

6、属性类函

• attr()：返回选择元素的属性值。
• toggle()：用于模拟鼠标连续单击事件，用于切换效果。实验性功能，暂时不支持~
• var()：可以代替元素中任何属性中的值的任何部分。

7、字体设置函数

• annotation()
• character-variant()
• ornaments()
• styleset()
• stylistic()
• swash()

8、其他类型函数

• symbols()：容许自定义序列号的符号，如 list-style。
• counter()：设置计数器。
• counters()：将计数器的值增加到不同的嵌套层级的元素。
• env()：将用户代理定义的环境变量值插入你的 CSS 中。
• format()：是以一种可读性较高的方式来呈现(排列)CSS中的样式；这样可以便于查看和修改CSS样式。
• leader()
• local()：实验性功能，后期或许会修改
• target-counter()
• target-counters()
• target-text()

备注：本文会根据后续使用说明来不断完成，如果你发现不能点击，不是因为显示有问题，只是因为我还没整理，感兴趣的也欢迎大家投稿完善。要求：函数用法说明，示例源码提供。