# 前言

各位同学都知道，CSS只是一门声明式的语言，主要为标记语言HTML服务。很多前端开发者都会鄙视它，不愿意深入学习，更多会抛出一个原因：现在不是有很多UI框架吗，我还编写CSS干嘛！

虽然CSS看上去弱不禁风，常用的也就是一堆静态属性声明而已。然而，这只是完全不了解CSS且还停留在编写属性声明的同学对CSS的理解而已。时至今日，随着前端技术的不断变革，也让曾经被鄙视的CSS变得越来越强大。过去只有声明式的CSS，现在也拥有了具有运算能力的函数。

CSS能做的事情可多了，JS有变量和函数，CSS也有。本章先摸透一些常用的函数，因为函数在后面章节中各种客串出场。

# 函数

CSS函数指复杂类型或调用特殊处理的组件值类型。为单调的属性声明增加了更强大的点缀，让简单的CSS变得更有艺术感。其语法也很简单，编写形式为function(params)，JS里的函数调用一致。在CSS代码中，只要带有()的属性值都是函数。

有了函数后，可将一系列相关计算交给浏览器处理，可减少大量人工计算甚至无需人工计算，大大提高了CSS代码的编写效率。

# 分类

笔者敢相信，大部分同学常用到的函数只有url()、rgb()和rgba()，稍微深入一点的也只有calc()、cubic-bezier()和linear-gradient()

其实不然，函数怎么会只有这几个。从W3C文档详情发现总共存在86个可用的函数，一点也不比属性少。按照惯例，笔者又对其进行了合理的记忆分类，以下分类均为笔者使用过的函数，暂未得到浏览器支持且在Caniuse上未收录的函数就不在分类范围内了。

颜色函数

• rgb()：RGB色彩模式
• rgba()：RGBA色彩模式
• hsl()：HSL色彩模式
• hsla()：HSLA色彩模式
• color()：色彩模式，基于当前颜色衍生出其他颜色

属性函数

• attr()：属性
• var()：变量

数学函数

• clamp()：区间范围值
• counter()：计数器
• counters()：嵌套计数器
• calc()：计算
• max()：最大值
• min()：最小值

背景函数

• url()：图像路径
• element()：图像映射，渲染指定元素为图像
• image-set()：图像集合，根据屏幕分辨率匹配合适图像
• linear-gradient()：线性渐变
• radial-gradient()：径向渐变
• conic-gradient()：锥形渐变
• repeating-linear-gradient()：重复线性渐变
• repeating-radial-gradient()：重复径向渐变
• repeating-conic-gradient()：重复锥形渐变

滤镜函数

• blur()：模糊
• brightness()：亮度
• contrast()：对比度
• drop-shadow()：阴影
• grayscale()：灰度
• hue-rotate()：色相旋转
• invert()：反相
• opacity()：透明度
• saturate()：饱和度
• sepia()：褐色

图像函数

• circle()：圆形
• ellipse()：椭圆形
• inset()：矩形
• path()：路径
• polygon()：多边行

变换函数

• matrix()：矩阵
• matrix3d()：3D矩阵
• perspective()：视距
• rotate()：旋转
• rotate3d()：3D旋转
• rotateX()：X轴旋转
• rotateY()：Y轴旋转
• rotateZ()：Z轴旋转
• scale()：缩放
• scale3d()：3D缩放
• scaleX()：X轴缩放
• scaleY()：Y轴缩放
• scaleZ()：Z轴缩放
• skew()：扭曲
• skewX()：X轴扭曲
• skewY()：Y轴扭曲
• translate()：位移
• translate3d()：3D位移
• translateX()：X轴位移
• translateY()：Y轴位移
• translateZ()：Z轴位移

缓动函数

• cubic-bezier()：贝塞尔曲线
• steps()：逐帧

# 颜色函数

颜色函数是最常用的函数，没有之一。颜色函数可用在border-color、outline-color、background-color、box-shadow、color、caret-color等属性上使用。

RGB色彩模式：rgb()、rgba()

例如将文本声明成白色，普通的声明可用color:white和color:#fff。有了颜色函数后，可用rgb()和rgba()声明。将原来的声明改成成color:rgb(255,255,255)或rgba(255,255,255,1)

• rgb()里的R表示红色，G表示绿色，B表示蓝色，而rgba()多出来的A表示透明度，这个A与opacity声明的透明度不同，rgba()声明的透明度不会应用到子节点上，而opacity声明的透明度会应用到子节点上。
• 建议在声明普通颜色时使用HEX色彩模式(16进制色彩模式)，若颜色存在透明度的需求，可用rgba()。但是rgba()的参数不太友好，得把HEX转换成RGB。由于本小册使用sass作为样式预处理语言，编写rgb()和rgba()时使用HEX代替RGB即可。将原来的声明改成成color:rgb(#fff)或rgba(#fff,1)
• HSL色彩模式：hsl()、hsla()
• HSL色彩模式是一种工业界的色彩标准，因为它能涵盖到人类视觉所能感知的所有颜色，所以在工业界广泛应用。
• hsl()和hsla()这两个颜色函数与上述两个颜色在CSS和sass上用法相似。H表示色相，S表示饱和度，L表示亮度，A<