CSS 你能见到的函数标记（上）

与其余任何编程语言都同样，CSS 当中拥有许多函数，功能也是十分给力的，不少时候咱们已经使用了却没有注意到。最近复习 CSS 当中的知识点时，忽然发现咱们平时用到的 CSS 函数只是 CSS 大框架中的一小部分，因而对 CSS 函数标记的知识总结了一下，但愿能对整个的 CSS 知识体系有更清晰的了解，可以帮助其余人，也扩充本身的知识库。css

在总结的时候断断续续发现了愈来愈多的函数，在发现新知识高兴的同时，也注意到不少 CSS 的内容并无一份完整的草案能够从头看到尾，只能一点一点收集，不管是 w3.org 仍是 mdn 都面临着难以收集完整信息的问题，可能会有遗漏，欢迎给我拍砖。html

总结不易，但愿看官先赞后看，十分感谢！web

什么是 CSS 函数标记

CSS 函数本来全称叫作 CSS 函数标记（Functional Notations），它能够用来表示 CSS 当中更复杂的类型或者调用一些特殊的处理方式。语法通常以函数名称做为开头，而后左括号、参数、右括号，括号内能够有空格，一样能够有多个参数，格式相似 CSS 属性值。编程

当咱们须要实现一个须要计算的 CSS 样式时，一般须要用到 JavaScript，但某些状况下，一段 CSS 函数就能够搞定。（若是是逻辑复杂的状况，做者依然推荐使用 JavaScript 来实现效果，这可让代码在将来更容易维护。）canvas

句法以下：浏览器

selector {
  property: functional-notation( [argument]? [, argument]! );
}
复制代码

固然直接看函数标记的句法，可能很难想象到平常使用的样子。不利于理解，因此下面作个例子。服务器

举个栗子

若是想实现以下图效果：markdown

HTML 文本以下：网络

<ol class="test">
            <li>Node
                <ol>
                    <li>Node
                        <ol>
                            <li>Node</li>
                            <li>Node</li>
                            <li>Node</li>
                        </ol>
                    </li>
                    <li>Node</li>
                </ol>
            </li>
            <li>Node</li>
            <li>Node</li>
        </ol>
复制代码

做为一个文档的目录，大批量的数据可能会从服务器请求过来，生成大量的 DOM 节点。常见的处理通常是在循环增长新节点的同时，可能会增长一个相似 <li><span style="color:red;">1.1.1</span><a href="">Node</a></li> 这样的元素。这个时候咱们须要去拼接字符串以及循环的索引值，生成 1.1.1 这个号码。app

for ( ... ) {
	// 已知的参数 index1, index2, index3...
	const str = `${index1}.${index2}.${index3}`
	// 下面的逻辑...
}
复制代码

根据这份目录嵌套的层级不一样，会出现新的判断逻辑。

但实际上这是彻底不须要的，逻辑上咱们不关心前面的号码，甚至不该该经过 JavaScript 来生成序号的 DOM，做为目录咱们只关心渲染后面的文本。值得庆幸的是有其余的方式实现上文序号的功能，其中之一能够经过 CSS 的函数来轻松实现。

<style>
        ol{margin:0;padding:0;list-style:none;counter-reset:item;}
        li{padding-left:2em;}
        li:before{counter-increment:item;content:counters(item, ".") " ";color:#f00;}
</style>
复制代码

引用这段 CSS 以后马上发现，上面的 HTML 文本马上变成了图中显示的样子，经过 counters CSS 函数标记，轻松实现功能。

常见的 CSS 函数

为了让咱们更容易对这篇文章的知识有印象容易记忆，我将 CSS 中的函数进行了几个分类：

背景图函数
渐变函数
颜色函数
动画函数
图形函数
滤镜函数
转换函数
自定义属性函数
伪类选择器函数
网格函数
数学函数

除了上面的分类，还特别分出了还在开发状态，以及不推荐使用的函数：

处于开发状态的函数
不推荐使用的函数

背景图函数

背景图函数顾名思义，是能够设置元素背景图属性而使用的函数，固然函数的功能不必定只能设置背景图片。

url（）

url 函数是最多见的一个 CSS 函数了，它能够连接到具体的资源并加载它们。包括图像，字体，甚至其余的级联样式表。固然出于对网页性能的考量，最好限制加载资源的个数，毕竟每个请求都是一次 HTTP 请求，会影响其余资源的加载。

@import('./other.css')

.test {
	background-image: url('https://sxyle.com/banner.png')
}
复制代码

由于是一个十分常见的函数，不过多展开介绍，具体细节可查阅 MDN。

image（）

Image 函数仍是一个 处于开发状态的函数 ，本文写做时尚未浏览器在正式环境中支持它，可是它强大实用的功能已经初现端倪。它的语法其实和 url 函数相似，可是它的区别在于能够在图像源地址后面添加媒体片断标识符（沿 x 和 y 轴起点以及宽度和高度）来显示源图像的一部分。参数中定义的图像部分将成为独立图像。语法以下：

.back {
	background-image: image('https://sxyle.com/image.webp#xywh=0,20,40,60')
}
复制代码

除了能够显示图像的一部分，还能够提供一个图片的备选图像：

.back {
	background-image: image('try.webp', 'try.svg', 'try.gif')
}
.back::before {
  content: image('try.webp', 'try.svg', 'try.gif')
}
复制代码

总的来讲是一个还处于草案状态的 CSS 函数，但已经能够看出具备足够的潜力成为将来之星哈。

element （）

element 函数目前仅有高版本 FireFox 浏览器经过前缀才可使用，但它提供的功能也是十分让人激动。它能够从任意的 HTML 元素中生成做为图像的值。

单独看定义可能稍微有点难以理解，若是换一种通俗的说法：element 函数可让一个 DOM 元素做为另外一个 DOM 元素的背景图片，而且这个图片是实时更新的，经过修改 DOM 元素能够同时修改背景图片。

<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
  </div>
</div>
复制代码

经过使用上面 -moz-element() ，能够实现下面的效果：

这里借用了 MDN 中的一个例子，可是能够十分清晰的了解，经过 background:-moz-element(#myBackground1) no-repeat; 第二个 div 元素已经做为第一个 div 元素的背景图片了。

这个函数在 canvas 当中是至关实用的。

image-set（）

使用这个函数，能够基于浏览器对分辨率和网络速度，指定图像列表供浏览器选择用做图片背景，让浏览器选择最适合用户的图像。

.back {
	background-image: image-set("try.png" 1x, "try-2x.png" 2x, "try-print.png" 600dpi);
}
复制代码

是一个十分加强用户体验的函数，在将来应该会有较大的使用场景，目前仅有少许浏览器能够经过增长前缀的方式来使用。

渐变函数

首先先解释一下渐变函数的意思，就是将一种颜色转换为多种其余颜色时，会产生渐变。渐变函数帮助现代用户界面增长了精致美观的设计方案，它能够指定渐变的颜色、颜色在渐变区域的位置、渐变的角度。从兼容性来考虑，整体新的浏览器都还支持的能够，在特定的生产环境中能够没有负担的使用。

linear-gradient（）和 repeating-linear-gradient（）

线形渐变函数应该是相比较其余渐变函数，使用场景最多的一种。

.back {
	background: linear-gradient(#00c13c, #9198e5);
}
复制代码

和其余渐变函数同样，函数没有内在尺寸，函数的具体尺寸会和使用它的元素尺寸匹配。

线形渐变的具体参数还有渐变的角度和渐变的方位等等。

另外值得一提的是 repeating-linear-gradient() 函数，由于在 linear-gradient() 函数中实际上是不具备重复性的，所以经过重复渐变函数能够实现不一样的 CSS 样式效果，以下：

.back {
  /* 一个倾斜45度的重复线性渐变, 从蓝色开始渐变到红色 */
  background: repeating-linear-gradient(45deg, blue, red);

  /* 一个从右下角到左上角的重复线性渐变, 从蓝色开始渐变到红色 */
  background: repeating-linear-gradient(to left top, blue, red);

  /* 一个由下至上的重复线性渐变, 从蓝色开始，40%后变绿， 最后渐变到红色 */
  background: repeating-linear-gradient(0deg, blue, green 40%, red);
 }
复制代码

感兴趣的小伙伴能够本身体验一下，学习知识最好的途径就是实践咯。

radial-gradient（）和 repeating-radial-gradient（）

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。

径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。

径向渐变与线形渐变很是类似，只是从中心点向外放射颜色变换，而不是直线。它们一般用于建立半透明的屏幕，以帮助将一个模拟弹窗与背景分开。

.back {
  background: radial-gradient(ellipse at center, #3053b9 0%, #5343ff 50%, #00ffff 50.25%, #00ffff 100%);
  height: 325px;
  width: 325px;
}
复制代码

上面代码的效果以下：

若是说线形渐变是一个冰冷无情的铁围墙，径向渐变就是波光粼粼温暖的湖面，一层一层泛着但愿的光芒...

因为渐变函数的参数都十分相似，因此能够以一样的参数来使用 repeating-radial-gradient() ，下面将参数稍微更改一下，并使用新函数：

.back {
  background: repeating-radial-gradient(ellipse at center, #cc1920 0%, #00c13c 10%, #cc1920 20%, #cccc11 30%);
  height: 325px;
  width: 325px;
}
复制代码

效果以下：

这样的效果若是配合上一些微妙的 css animation 效果，真的让人眼花缭乱，你的网站今后再也不单调。（有的时候在想能不能把网站的广告作成万花筒的感受，一进网站就好像中了幻术...）

conic-gradient（）和 repeating-conical-gradient（）

下面就是第三种渐变函数——圆锥渐变。圆锥渐变和径向渐变的不一样之处在于颜色是绕着圆进行旋转。所以常常用来建立圆形进度条，画一些圆形的效果动画等等。然而圆锥渐变相比较上面两种函数，兼容性并不乐观，只有各个浏览器的较新版本才能够支持它。

一个小例子：

.back {
  background: conic-gradient(
     #74103c 115deg, #00c13c 136deg 180deg, #99123c 100deg);
  border-radius: 50%;
}
复制代码

以下所示：

咱们常见的饼图，圆形进度条均可以用它来实现，十分的实用。下面再介绍一个使用圆锥渐变，实现的使人产生「幻觉」的代码：

.back{
	background-image:
     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}
复制代码

单单看这几个属性值可能很难想到它真正的效果，但若是看下面的示例图片：

做者在看到这个效果的时候，真的眼睛很刺痛，好像看见太阳通常闪耀，产生眩晕感。可能这就是追星的感受吧...

颜色函数

CSS 中涉及颜色的地方十分多，咱们经常使用的有几种定义颜色的方式：

十六进制（HEX）
RGB
HSL
直接写浏览器预约义的颜色名称（black, white...）

关于 CSS Color Level 4 的颜色张鑫旭大佬也有一篇很细致的讲解，在这里也分享给你们：CSS Color Level 4

固然除了这几种方式还有其余的 CSS 函数能够供咱们使用，下面咱们先从常见的颜色函数开始：

rgb（）和 rgba（）

rgb 函数可让你使用数字来描述 r 的红色、g 的绿色、以及 b 的蓝色和 alpha 的透明度。十六进制颜色与 rgb 也能够进行自由转换。

rgb 函数使用起来也是十分简单，通常状况下 background: rgb(100, 200, 50) 就可使用。在旧版本的浏览器，使用 rgb 意味着放弃了 alpha 值的设置，默认就是 1，不透明，可是随着 CSS 版本的推动，如今新版浏览器 rgb 函数也能够设置第四个参数，做为 alpha 值。甚至还可使用斜杠语法 background: rgb(100, 200, 50 / 0.4) 。

rgba 函数和 rgb 十分相似，若是对具体细节有兴趣，能够查看 w3.org 的 rgba 函数定义。

hsl（）和 hsla （）

hsl 函数和 rgb 函数十分相似，可是描述的再也不是红、黄、蓝。而是色彩、饱和度、亮度三个参数。

但全部这些颜色表示的新语法中，#RRGGBBAA是最为实用的，使用频率是最高的，至于其余一些新的语法，或者容错性的加强，好当然好，可是平常开发鲜有机会用到。

条条大路通罗马，因此原来那条路好好的，也就不必使用那些可能有坑的路。

这两个函数的使用大致以下：

hsla(0, 100%, 50%, 80%)
  hsl(270 60% 50% / .15)
  hsl(270 60% 50% / 15%)
  hsl(270deg, 60%, 70%)
  hsl(4.71239rad, 60%, 70%)
  hsl(.75turn, 60%, 70%)
复制代码

能够看出两种函数的语法很是自由，斜杠、百分比、角度、有无逗号的使用均可以，由于过于常见，很少深刻探讨。

lch（）和 lab（）

不少人应该和我同样还不了解这两个函数的意义，所以这里摘一段百科：

Lab模式是根据Commission International Eclairage（CIE）在1931年所制定的一种测定颜色的国际标准创建的。于1976年被改进，而且命名的一种色彩模式。Lab颜色模型弥补了RGB和CMYK两种色彩模式的不足。它是一种设备无关的颜色模型，也是一种基于生理特征的颜色模型。 Lab颜色模型由三个要素组成，一个要素是亮度（L），a 和b是两个颜色通道。a包括的颜色是从深绿色（低亮度值）到灰色（中亮度值）再到亮粉红色（高亮度值）；b是从亮蓝色（低亮度值）到灰色（中亮度值）再到黄色（高亮度值）。所以，这种颜色混合后将产生具备明亮效果的色彩。

简单来讲是另外一种颜色测定的模式，而且它们是与设备无关的颜色。

接下来回到这两个函数，它们还处于开发状态，所以资料较少，只有在csswg这里找到了部分细节。

CSS 容许直接在 lab 和 lch 函数中直接表达颜色

lab() = lab( <percentage> <number> <number> [ / <alpha-value> ]? )

lch() = lch( <percentage> <number> <hue> [ / <alpha-value> ]? )

光看句法可能很难理解，先说 lab 函数，它能够接受 4 个参数，可是第四个为可选参数。

第一个参数为 CIE 亮度，如同上面摘抄的百度百科，具体关于 CIE 亮度的问题能够本身寻找，做者也不是十分了解，很少讲述。
第二个参数为上面摘抄的颜色通道的 a 通道。
第三个参数为上面的颜色通道中的 b 通道。
第四个参数做为可选参数 alpha 值，和 rgb 函数的 alpha 十分相似。

很相似的是 lch 函数，一样是 4 个参数，第四个参数依然是可选参数。

第一个参数和 lab 函数的第一个参数同样，一样是 CIE 亮度。
第二个参数是色度，大体表示颜色量，取值能够从 0 取到 230，但若是是负值，是会取 0 的，超过 230 的话最终实际依然是 230，并不会出现语法错误。
第三个参数很相似 hsl 函数的 <hue> 色相，能够取值数字或者角度。
第四个参数与 lab 函数相同，做为 alpha 值。

上面就是两个函数的定义，目前 MDN 等网站资讯较少，想得到第一手资讯请关注 CSS 草案。

这两个函数使用起来和其余的颜色函数没什么差异：

lab(29.2345% 39.3825 20.0664);
  lab(52.2345% 40.1645 59.9971);
  lab(60.2345, -5.3654 58.956);
  lab(62.2345% -34.9638 47.7721);
  lab(67.5345% -8.6911 -41.6019);
  lch(29.2345% 44.2 27);
  lch(52.2345% 72.2 56.2);
  lch(60.2345% 59.2 95.2);
  lch(62.2345% 59.2 126.2);
  lch(67.5345% 42.5 258.2);
复制代码

hwb（）

先来了解一下，什么是 hwb 函数吧：

HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors, similar to HSL, but often even easier for humans to work with. It describes colors with a starting hue, then a degree of whiteness and blackness to mix into that base hue.

它是另外一种相似 hsl 定义颜色的函数方法，一般更容易使用，由于你只须要关心你想要的色相，而后适当的混入白色或者黑色就能够获得你想要的颜色。

句法以下：

hwb() = hwb( <hue> <percentage> <percentage> [ / <alpha-value> ]? )

若是是我，应该比较愿意尝试一下这种方法，固然若是不考虑兼容性的话。

它的第一个参数和 hsl 相同的表示色相，具体能够参考 hsl 函数的第一个参数。
第二个参数是要混入的白色量，能够从 0% 到 100% 取值。
第三个参数是要混入的黑色量，能够从 0% 到 100% 取值。
第四个参数依然是 alpha 通道，与其余函数相同，不做解释。

color（）

color 函数能够在特定的色彩空间指定颜色，同时它也是取决于设备而产生颜色的函数。

句法以下：

color() = color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <alpha-value> ]? ]# , <color>? )

它是一个比较复杂的 CSS 函数标记，简单的使用以下：

color(rec2020 0.42053 0.979780 0.00579, color(display-p3(0 1 0)));
复制代码

上面使用 rec2020 色彩命名空间下使用这种石灰色，同时在 display-p3 屏幕上没法显示前面的颜色，将会使用后面做为备选的颜色展现。

若是想了解更多，能够查看具体的定义与细节，同时能够先了解一下不常见的 @color-profile 规则。

device-cmyk（）

device-cmyk 函数是最后一个要介绍的颜色函数了，它是一个与设备相关的颜色函数。若是你须要打印这种须要与设备相关的状况时，这个函数可能会比较有用，由于实际打印出来是有色差的，可能与期待的结果相差甚远。

句法以下:

device-cmyk() = device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? ) <cmyk-component> = <number> | <percentage>

它一共接受 6 个参数，分别是：青色、品红色、黄色、黑色成份，同时第 5 个参数与以前几个函数的 alpha 值相同，第 6 个参数是备选参数。

Typically, print-based applications will actually store the used colors as CMYK, and send them to the printer in that form. However, such colors do not have a colorimetric interpretation, and thus cannot be used in gradients, compositing, blending and so on. As such, Device CMYK colors must be converted to an equivalent color.

打印机一般会储存 CMYK 颜色，可是这些颜色不能进行渐变、合成、混合等操做。所以 device-cmyk 必须转换为一个近似的颜色。

它一样涉及到不常见的 @color-profile 规则。能够参考 color 一同窗习。

总结

随着文字的堆砌，我学习以前，觉得 CSS 函数标记的内容是一滩细沙，我将它堆成了沙堡。但当我站在沙堡之上，忽然发现，它并非一滩沙，而是无数的石头墙将沙困在这里。因而我继续攀登，终于登上了石头墙，觉得将会获得真谛，今后学会 CSS 玄幻奇妙的函数标记。没成想石头墙的那边更加陡峭，若是想登上顶峰只能继续攀登。 —黄梵高

说点人话就是：原本觉得 CSS 的知识只是比较难找，但开始寻找以后发现，真正难的是 CSS 函数自己和不少 CSS 存在的规则交错在一块儿，所以每个函数，均可能会有着难以理解的特性，须要反复阅读，查看文档才能准确理解其意（已经存在中文文档的能够很方便的阅读），固然可能会有人说我费这个力气查看将来不必定存在的 CSS 规则是否有意义。

知识老是须要概括总结的，CSS 虽然比较杂，但只要梳理好知识结构，仍是能够深刻学习的，有那么多大佬已经铺垫了坚实的长路，跟着巨人的步伐，也总结一下我学习的 CSS 函数标记吧！

最后求个赞b(￣▽￣)d！

本周继续更新剩下的 CSS 函数标记。