CSS中的函数

大家都知道，CSS只是一个声明式的语言，主要为标记语言服务。很多 程序员 鄙视它，有一部分原因是CSS并不像其他程序语言一样，具有一些逻辑能力以及函数功能等特性。随着CSS的不断变革，其慢慢地也变得越来越强大。时至今日，CSS中也有具有函数和运算相关的能力。比如我们今天要聊的CSS函数。在 CSS Values and Units Module Level 4 中把 函数标记（ Functional Natations ） 单独提取出来做为该规范的一部分。而这部分主要介绍了一些具有数学计算能力相关的属性值，比如大家熟悉的 calc() 和不怎么熟悉的 min() 和 max() 。而我们今天要聊的是CSS中的函数，其中就包括这些部分。如果大家感兴趣，欢迎继续往下阅读。

什么是函数标记

函数标记 是 CSS值和单位模块 中的一部分。从Level 4 开始，函数标记中涵盖的内容也越来越多，比如 toggle() ，它允许通过使用 attr() 在值和属性引用之间切换。另外更有趣的是，里面包含了一些具备数学计算能力的表达式，比如 calc() 、 min() 和 max() 。

W3C规范是这样描述函数标记的：

函数标记是一种可以表示更复杂类型或调用特殊处理的组件值类型。语法从函数名开始，紧接着是左括号，然后是参数到符号，然后是右括号。

形象一点来说，它是一个函数或函数名，比如 calc ，后面紧跟着 () 。括号之间可以是一个表达式。看上去是不是有点类似于其他编程语言中的函数呢？

从这一点来说，在CSS中只要是带有 () 的属性值，我们都可以把它纳入到CSS中函数标记（或者函数表示法），简单的就称其为 CSS函数 。仔细回忆一下，如果按其功能或特性我们可以简单的分为：

• 属性函数 ： attr()
• 背景图片函数 ： linear-gradient() 、 radial-gradient() 、 conic-gradient() 、 repeating-linear-gradient() 、 repeating-radial-gradient() 、 repeating-conic-gradient() 、 image-set() 、 image() 、 url() 、 element()
• 颜色函数 ： rgb() 、 rgba() 、 hsl() 、 hsla() 、 hwb() 、 color-mod()
• 图形函数 ： circle() 、 ellipse() 、 inset() 、 polygon() 、 path()
• 滤镜函数 ： blur() 、 brightness() 、 contrast() 、 drop-shadow() 、 grayscale() 、 hue-rotate() 、 invert() 、 opacity() 、 saturate() 、 sepia()
• 转换函数 ： matrix() 、 matrix3d() 、 perspective() 、 rotate() 、 rotate3d() 、 rotateX() 、 rotateY() 、 rotateZ() 、 scale() 、 scale3d() 、 scaleX() 、 scaleY() 、 scaleZ() 、 skew() 、 skewX() 、 skewY() 、 translate() 、 translateX() 、 translateY() 、 translateZ() 、 translate3d()
• 数学函数 ： calc() 、 min() 、 max() 、 mixmax() 、 repeat()
• 缓动函数 ： cubic-bezier() 、 steps()
• 其他函数 ： counter() 、 counters() 、 toggle() 、 var() 、  symbols()

数学表达式

前面也提到过了，在函数标记中引入了数学表达式。有关于数学表达式，W3C是这样描述的：

数学函数 calc() 、 min() 和 max() 允许将带有加法（ + ）、减法（ - ）、乘法（ * ）和除法（ / ）的数学表达式用于 () 之中。

这也就是说，在一些函数中，我们可以通过表达式来计算值。简单点说，表达式一词只是括号内完全允许使用数学逻辑的一种花哨说法。

对这两点有基本了解之后，咱们分别来看看CSS中各种类型的函数是如何使用，又将起什么作用。

CSS的函数

在函数标记一节中，我们简单的整理了CSS中的各种类型的函数。有了这些函数之后，可以很好的帮助我们编写CSS，也可以减少人肉的计算，甚至都不需要人肉计算，客户端会自动帮助我们计算。接下来简单的了解一些CSS的函数的使用以及所起的相应作用。

属性函数

属性函数 attr() 是我们较为熟悉的一个函数，只不过大家平时并不把其称为函数。一般情况下，其主要配合CSS的伪元素 ::before 、 ::after 和 content 一起使用，可以根据HTML元素自定义的属性生成内容。比如CSS 的提示框就是用这个方式来做的：

<span class="tooltip-toggle" aria-label="Sample text for your tooltip!" tabindex="0">

.tooltip-toggle::before {
    content: attr(aria-label);
}

上面只是 attr() 函数最基础的使用，在CSS 值和单位模块 中， attr() 功能更为强大，不仅仅是根据HTML元素属性生成内容，其可以对所有属性应用 attr() 函数的功能，并返回非字符串值，比如数字、颜色等。

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

attr() 还提供了一个回退值的选项，如果指定属性丢失，或者无法将其解析为给定类型，或者属性无效，则会采用这个回退值。比如下面这样的示例：

height: attr(data-size em, 20);

上面这个示例就是 height 属性设置的值将会从元素的 data-size 属性中获取，并且将其单位设置为 em 。同时如果 data-size 无法获取或失效时，则会采用回退值 20 。

背景函数

背景函数是属于 CSS图像值和替换内容 （CSS Image Value and Replaced Content Module Level 4）中的内容。其中大部分都是我们熟知的，比如：

• url() ：指定引用图片的路径
• linear-gradient 、 radial-gradient() 、 conic-gradient() 、 repeating-linear-gradient() 、 repeating-radial-gradient() 、 repeating-conic-gradient() ：CSS中渐变相关的函数，可以通过这些函数绘制不同的渐变图像
• image-set() ：可以根据不同的终端的 dpr 指定不同倍数的图像
• image() ：其功能和 url() 函数类似，只是功能更为强大。比如，使用媒体片段剪辑出图像的一部分；指定回退图像；使用纯色作为图像；对具有方向性的图像进行注释
• element() ：可以将网站中的某部分当作图片渲染

其中较有为意思的是 image() 和 element() 两个函数。

使用 image() 中的 ltr 和 rtl 可以指定图像方向。如果图像是一个箭头，表示指向内容的项目符号点，则可以使用此设置确保箭头始终指向正确的方向。

image(ltr "arrow.png")
image(rtl "arrow.png")

可以达到镜像的效果。另外一个不同点是， image() 可以将纯色做为一图像。特别是图像加载失败时，可以使用纯色做为一个回退值。好比 background-image 通过 url() 加载失败时，采用 background-color 做为降级处理。

.special { 
    color: white; 
    background: image("dark.png", black); 
}

element() 可以将网站中的某部分当作图片渲染。比如说，当一个DOM元素在浏览器中得到正确的渲染时，其实你得到的就是一张图片。只要修改了元素，图片就会立马得到改变，甚至是选中文本也能呈现出来。

<div id="css-source"> 
    <p>Lorem ipsum</p> 
    <img src="" alt=""> 
</div> 
<div id="css-result"></div> 

#css-result { 
    background: element(#css-source); 
    background-size: 50% 50%; 
}

如果你对 element() 函数感兴趣的话，可以阅读《 CSS element() 函数 》一文。有关于渐变更多的介绍可以点击这里。另外关于 image-set() 更详细的介绍可以阅读《 image-set 实现Retina屏幕下图片显示 》一文。

颜色函数

在CSS中除了使用颜色关键词（比如， red ， blue ）和十六进制（比如 #fff , #f36 ）之外，还可以使用一些颜色函数来表示颜色。通常都运用于可以使用颜色的属性上，比如 color 、 background-color 、 border-color 等。在CSS中常用于设置颜色的函数有： rgb() 、 rgba() 、 hsl() 和 hsla() 等，这些也是我们熟知的颜色函数。

除此之外，还有两个我们不为熟知的，或者较新的颜色函数： hwb() 和 color-mod() 。

hwb() 函数采用的是 HWB 色彩模型，其实约等于 HSV 色彩模型，即：色相 H （ Hue ），饱和度 S （ Saturation ）和明度 B （ Brightness ）。无论是 HSV 还是 HSL 都是对三原色光模式的一种非线性变换。这些变换的目标都是创建对人类友好的色彩标记系统。 HSL 和 HWB 或 HSV 之间存在直接的对应关系，如下：

HWB 模型通常比 HSL 模型更直观（ HSL 模型本身被认为比 RGB 模型更直观）。这主要是因为， HWB 模型允许你选择一个色调，然后根据需要将其与白色和黑色混合。这基本上就像混合颜料。

hwb() 函数接受 HWB 值作为参数。HWB值以逗号分隔的列表形式提供，其中包含三个值，分别是色相，白度（Whiteness）和黑度（blackness）。还可以提代第四个值为指定颜色的透明度，这个值可以是一个数字也可以是一个百分比。

比如我们常用的 blue 颜色就可以用 hwb(240, 0%, 0%) 来表示。其中 240 就是色相的值，表示颜色圆的角度，如下图所示：

你可以指定值为角度，例如 240deg ，也可以是一个简单的数字，比如 240 。对照上图，其中 240 对应的刚好是 blue 颜色。第二个值表示要与颜色混合的白色数量，第三个值表示要与颜色混合的黑色数量，这两个值都用百分比来表示。

有关于CSS颜色相关更详细的介绍可以阅读下面两篇文章：

• 给你点颜色看看
• CSS 颜色体系详解

另外， color-mod() 函数可以用来修改颜色。通过ColorMe，基于#29B4F0颜色，调整不同的参数得出的颜色效果：

color-mod() 函数也是一个强大而有意思的函数，如果大家感兴趣的话，可以移步阅读《 使用 color-mod() 函数修改颜色 》一文。

有关于颜色函数相关的函数都被纳入在 CSS颜色模块 （CSS Color Module Level 4）中。

图形函数

图形函数主要运用于 shape-outside （ CSS Shapes Module Level 1 ）、 clip-path （ CSS Masking Module Level 1 ）和 offset-path （ Motion Path Module Level 1 ）中的 <basic-shape> 。

在CSS中 polygon() 、 circle() 、 ellipse() 和 inset() 函数都可以绘制基本形状。在 shape-outside 、 clip-path 和 offset-path 中都可以使用这四个函数，实现对应的文本围绕排版、蒙板和路径动画的效果。他们虽然绘制基本形状，但也常被称为路径图形。分别来看看具体的实例：

shape-outside

offset-path

clip-path

有关于 shape-outside 、 clip-path 和 offset-path 更多的介绍可以阅读下面的相关文章：

• CSS Shapes
• CSS clip-path
• CSS offset-path （早期 offset-path 又被称为 motion-path ）

滤镜函数

滤镜函数隶属于 Filter Effects Module Level 1 模块，主要运用于CSS的 filter 和 background-filter 两个属性中。主要实现类似于设计软件中滤镜中的效果。

比如下面这个示例：

有关于滤镜函数更多的介绍可以阅读下面两篇文章：

• 高级CSS filters
• CSS3 Filter的十种特效

转换函数

转换函数指的是CSS的 transform 中用到的属性值。属于 CSS Transforms Module Level 1 模块中 <transform-function> 部分 ，具体又分为 2D 和 3D 两个部分。具体有关于 transform 的详细介绍就不在这里阐述了。因为要说清楚这个模块，就算是用几篇文章的篇幅来介绍也不一定能介绍的完。如果你要是感兴趣的话，可以阅读下面这几篇文章：

• CSS3 2D Transform
• CSS3 3D Transform
• CSS Transform 更多教程

有关于转换函数相应的效果可以查看下面这个示例（包含了 2D 和 3D 效果）：

数学函数

在 CSS值和单位模块（Level4） 中第9部分函数标记中提供了具有 数学表达式能力的函数 ： calc() 、 min() 、 max() 和 clamp() ，其中 calc() 是大家较为熟悉，也使用较多的一个。

数学表达式函数允许使用带有 + 、 - 、 * 和 / 的数学表达式做为函数的值。函数的作用是：

利用标准运算符优先级规则，来计算结果。

其中 min() 或 max() 函数分别表示其包含的最小（最负）或最大（最正）值， clamp() 函数表示其中心计算，根据其最小和最大计算。而且这几个函数还可以相互嵌套，比如： calc(min()) 、 min(calc()) 、 calc(max(min())) 和 calc(max()) 等。但是建议大家使用的时候还是应该尽量避免嵌套。

通过简单的示例来阐述这几个函数的具体意义，比如下面这个示例：

width: min(max(100px * 2, 70vw), 500px)

这行代码将会告诉浏览器，尝试将 width 设置为 70vw ，但不要低于 200px （ 100px * 2 ）或高于 500px 。当然你还可以按下面这样的方式设置，达到类似的效果：

min(max(minN, midN), maxN)

其意思非常明了，一个最小值，一个中间值和一个最大值。在 min() 中嵌套 max() 有点类似于 clamp() 函数相似的功能。

clamp(minN, midN, maxN)

如果使用了 min-width 和 max-width ，可以通过 min() 和 max() 达到一个等效的效果。或许在未来， min-width 和 max-width 或许会被 min() 和 max() 这样的函数所取替。

有关于其更详细的介绍可以阅读 规范中对应的内容 或者阅读@Dennis Gaebel在2017年写的一篇博文《 Getting Started With CSS Math Functions Level 4 》。

对于 calc() 函数就不做介绍了，估计了解CSS的同学对其都不会陌生，如果你从未接触过的话，可以点击这里进行了解。

在 CSS Grid Layout规范 中还有一个 minmax() 函数。这个函数能够让我们用最简单的CSS控制网格轨道的大小。这个函数包括一个最小值和最大值。

minmax() 函数接受两个参数，一个最小值和一个最大值。

minmax(min, max)

如果定义的最大值小于最小值，它将会被忽略，函数会被视为只设置了一个最小值。

有关于 minmax() 更详细的介绍，可以阅读《 minmax() 函数如何工作 》一文。

缓动函数

在CSS的 transition 和 animation 中有一个缓动函数属性： transition-timing-function 和 animation-timing-functions 。除了关键词 linear 、 ease 、 ease-in 、 ease-out 和 ease-in-out 之外，还可以使用 cubic-bezier() 和 steps() 函数。当然， linear 这些关键词也可以用 cubic-bezier() 函数来表示：

上图是一个 cubic-bezier() 函数的 在线工具 。

对于 steps() 函数是 CSS Easing Functions Level 1 中的一个函数。具体的表示如下图：

steps() 函数主要运用于 animation 中，对于实再CSS Sprites动画特别有益，比如下面这个Demo：

其他函数

我把 counter() 、 counters() 、 toggle() 、 var() 和 symbols() 纳入到其他函数的系列。其中 counter() 、 counters() 和 var() 函数估计大家有见过。其中 counter() 和 counters() 是隶属于 CSS 列表和计算器模块（Level 3）中的一部分 。常和 content 、 counter-increment 、 counter-set 和 counter-rewset 一起使用，可以生成类似于 list-style 相应的效果，而且还可以更个性化。比如使用它做一个评分的效果：

甚至还可以使用 counter() 函数做一些小游戏（纯CSS完成的）。有关于这方面相关的介绍，可以阅读《 使用CSS的 counter-increment 做的游戏 》一文。有关于 counter() 更多的介绍，可以点击这里进行了解。

var() 函数是用来调用CSS中自定义属性。比如：

:root {
    --color: red
}

.test {
    color: var(--color)
}

而且 var() 还可以配合 calc() 一起使用，可以起到很多意想不到的效果。有关于 var() 函数更多的介绍可以 阅读CSS自定义属性相关的教程 。

对于 toggle() 和 symbols() 函数可以与 list-style-type 用来定义计数器样式。其中 symbols() 函数提供了比常用预定义值（比如圆点、正方形、大写字母等）更多的选项。它允许你从图像或字符串创建自己的计数器标记。但更重要的是，它允许你围绕这些标记的显式定义特定的规则。

symbol() 函数是 @counter-style 的简化版。其提供了更多的功能。你可以精确地控制创建自定义计算器标记。而且 symbols() 函数提供了一种快速创建直接内联在属性中的计数器样式的方法，比如：

ul { 
    list-style: symbols(cyclic "\1F34E" "\1F34F"); 
}

得到的效果如下所示：

有关于 symbols() 函数更多的介绍，可以阅读《 CSS symbols() Function 》一文。

toggle() 函数也是 CSS 值和单位模块（Level 4）中的一部分 。该函数允许后代元素循环遍历一个值列表，而不是继承相同的值。比如：

<ul>
    <li>Item 1 </li>
    <li>Item 2 </li>
    <ul>
        <li>Item 3.1</li>
        <li>Item 3.2</li>
        <ul>
            <li>Item 3.3.1</li>
        </ul>
    </ul>
</ul>

ul {
    list-style-type: toggle(square, disc, circle);
}

最终效果如下图所示：

总结

早期的CSS是没有变量和函数这样的一个概念的，随着技术的革新，CSS所具备的能力也超出我们当初认识的一些 CSS特性。比如这篇文章中所提到的CSS函数的相关特性，就加强了CSS的能力。我们可以使用这些函数做一些特别有意思的东西。而且也减少了我们去做运算，特别是很多我们无法计算的东西，它能交给浏览器去做运算。比如说我们熟悉的 calc() 、 counter() 等。

最后希望这篇文章列出来的函数特性有助于大家更佳地了解CSS特性，同时希望对大家有所帮助。如果你对这方面也有了解或经验，欢迎在下面的评论中与我们一起分享。