CSS函数整理，CSS函数的使用方法

有很多前端切图人员对CSS函数这个名词有些陌生，事实上有很多CSS函数我们经常在代码中使用，只是我们没有意识到而已。像我们常见的定义颜色值的rgb、rgba都属于CSS函数。我们在讲《CSS变量，CSS自定义属性的定义和使用》时提到的var()函数，也属于CSS函数。

使用CSS函数，以前很多必须借助JavaScript才能实现的效果，现在也能轻松实现，甚至更加优雅。在前端切图工作中，使用CSS函数，可以为我们的工作带来事半功倍的效果，至少也会多一种前端实现的思路。

CSS函数按分类整理

根据函数的功能，我们可以将CSS函数分为九类函数，分别为属性函数、颜色函数、背景图片函数、图形函数、数学函数、缓动函数、滤镜函数、转换函数等等。

1、属性函数：attr()[实验中]；

2、颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；

3、背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；

4、图形函数：circle()、ellipse()、inset()、polygon()、path()；

5、数学函数：calc()、min()、max()、clamp()、mixmax()、repeat()；

6、缓动函数：cubic-bezier()、steps()；

7、滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；

8、转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；

9、其他函数：counter()、counters()、toggle()、var()、 symbols()。

注意：可点击具体CSS函数，查看其详细使用说明。

这些CSS函数大约一共有90多个，是不是有点超出你的想象，你是不是也一直以为CSS函数没几个？不过大可不必为此担心，常用的CSS函数的确不是很多。上文中，我们标红的属性为较为常用的CSS函数（标红+加粗的函数尤其重要一些），其余的使用频率较低，有一些尚还在在实验阶段，大家了解即可，需重点掌握我们标亮的一些CSS函数即可。

学习CSS函数，我们要记忆的点主要是该函数的变量及使用方法，多用一两次之后，加深记忆，在后期使用时即可手到擒来。