CSS 值函数
=======

**CSS 值函数**是调用特殊数据处理或计算的语句，以返回一个 CSS 属性的 CSS 值。CSS 值函数代表更复杂的数据类型，它们可能需要一些输入参数来计算返回值。

语法
--


```css
selector {
  property: function([argument]? [, argument]!);
}
```


值的语法以**函数名称**开始，后面是一个左括号 `(`。接下来是参数，然后用闭合小括号 `)` 结束函数。

函数可以接受多个参数，这些参数的格式与 CSS 属性值类似。允许有空白字符，但在括号内是可选的。在一些函数符号中，多个参数用逗号隔开，而其他参数则使用空格。

**备注：** CSS 值函数是作为属性值使用的，不应该与伪类相混淆。函数式伪类、语言伪类和几种树状结构伪类都需要参数值，但它们不是值函数。条件 @ 规则也不是值函数；括号是用来分组的。

转换函数
----

`<transform-function>` CSS 数据类型代表外观变换。它被用作 `transform` 属性的一个值。

### 转换函数

`translateX()`

水平移动一个元素。

`translateY()`

垂直移动一个元素。

`translateZ()` (en-US)

沿 z 轴方向移动一个元素。

`translate()`

在 2D 平面上移动一个元素。

`translate3d()`

在 3D 空间中移动一个元素。

### 旋转函数

`rotateX()`

沿水平轴旋转元素。

`rotateY()`

沿垂直轴旋转元素。

`rotateZ()`

沿 z 轴旋转元素。

`rotate()`

围绕 2D 平面的一个定点旋转一个元素。

`rotate3d()`

围绕 3D 平面的一个定轴旋转一个元素。

### 缩放函数

`scaleX()`

沿水平方向缩放元素。

`scaleY()` (en-US)

沿垂直方向缩放元素。

`scaleZ()` (en-US)

沿 z 轴方向缩放元素。

`scale()`

在 2D 平面上缩放元素。

`scale3d()` (en-US)

在 3D 空间中缩放元素。

### 倾斜函数

`skewX()`

沿水平方向倾斜元素。

`skewY()`

沿竖直方向倾斜元素。

`skew()`

在 2D 平面上倾斜元素。

### 矩阵函数

`matrix()`

描述一个齐次的二维变换矩阵。

`matrix3d()`

以 4x4 齐次矩阵的形式描述一个三维变换。

### 透视函数

`perspective()`

设置用户与平面 z=0 之间的距离。

数学函数
----

数学函数允许将 CSS 数字值写成数学表达式。

### 基本运算

`calc()`

在数字值上进行基本的算术运算。

### 比较函数

`min()`

计算一系列值的最小值。

`max()`

计算一系列值的最大值。

`clamp()`

计算最小值、中间值、最大值的中值。

### 阶跃值函数

`round()` (en-US) 
实验性

根据舍入策略计算一个舍入的数字。

`mod()` (en-US) 
实验性

计算一个数除以另一个数的模（与除数的符号相同）。

`rem()` (en-US) 
实验性

计算一个数字除以另一个数字的余数（与被除数的符号相同）。

### 三角函数

`sin()`

计算一个数的三角正弦值。

`cos()`

计算一个数的三角余弦值。

`tan()`

计算一个数的三角正切值。

`asin()`

计算一个数的三角反正弦值。

`acos()`

计算一个数的三角反余弦值。

`atan()`

计算一个数的三角反正切值。

`atan2()`

计算平面内两个数字的三角反正切值。

### 指数函数

`pow()`

计算基数的幂次方值。

`sqrt()`

计算一个数的平方根。

`hypot()`

计算其参数平方之和的平方根。

`log()`

计算一个数的对数值。

`exp()`

计算一个数的 `e` 次方值。

### 符号函数

`abs()` (en-US) 
实验性

计算一个数的绝对值。

`sign()` (en-US) 
实验性

计算一个数的符号值（正值或负值）。

过滤器函数
-----

`<filter-function>` CSS 数据类型表示可以改变输入图像的外观的图形效果。它被用于 `filter` 和 `backdrop-filter` 属性。

`blur()`

增加图像的高斯模糊度。

`brightness()`

增加或减少图像的亮度。

`contrast()`

增加或减少图像的对比度。

`drop-shadow()`

在图像背后应用阴影。

`grayscale()`

转换图像为灰度图。

`hue-rotate()` (en-US)

改变图像的整体色调。

`invert()` (en-US)

反转图像的颜色。

`opacity()`

增加图像的透明度。

`saturate()` (en-US)

改变图像的整体饱和度。

`sepia()` (en-US)

增加图像偏棕褐色的程度。

颜色值函数
-----

`<color>` CSS 数据类型指定了不同的颜色表示方法。

`rgb()`

根据红、绿、蓝和 alpha（透明度）成分来定义一个给定的颜色。

`hsl()`

根据色调、饱和度、亮度和 alpha（透明度）成分来定义一个给定的颜色。

`hwb()` (en-US)

根据色调、白度和黑度成分来定义一个给定的颜色。

`lch()` 
实验性

根据亮度、色度和色调成分来定义一个给定的颜色。

`oklch()` 
实验性

根据亮度、色度、色调和 alpha（透明度）成分来定义一个给定的颜色。

`lab()` 
实验性

根据实验室色彩空间中的亮度、a 轴距离和 b 轴距离来定义一个给定的颜色。

`oklab()` 
实验性

根据实验室色彩空间中的亮度、a 轴距离、b 轴距离和 alpha（透明度）来定义一个给定的颜色。

`color()` (en-US) 
实验性

指定一个特定的色彩空间，而不是隐含的 sRGB 色彩空间。

`color-mix()` 
实验性

在一个给定的色彩空间中，将两个颜色值按给定的数量混合。

`color-contrast()` 
实验性

从一个颜色列表中选择最高的颜色对比度，与一个基础颜色值相比较。

`device-cmyk()` 
实验性

以独立于设备的方式定义 CMYK 颜色。

图像函数
----

`<image>` CSS 数据类型提供了图像或渐变的图形化表示。

### 渐变函数

`linear-gradient()`

线性渐变沿着一条假想线逐渐过渡颜色。

`radial-gradient()`

径向渐变从一个中心点（原点）逐步过渡颜色。

`conic-gradient()`

锥形渐变是在一个圆周上逐步过渡颜色。

`repeating-linear-gradient()`

类似于 `linear-gradient()`，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。

`repeating-radial-gradient()`

类似于 `radial-gradient()`，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。

`repeating-conic-gradient()` (en-US)

类似于 `conic-gradient()`，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。

### 图像函数

`image()` (en-US) 
实验性

定义一个 `<image>`，与 `url()` 函数类似，但增加了一些功能，包括指定图片的方向性和首选图片不被支持时的后备图片。

`image-set()` (en-US)

从一组给定的 CSS 图片中挑选最合适的图片，主要用于高像素密度的屏幕。

`cross-fade()` (en-US)

以定义的透明度混合两个或多个图像。

`element()` 
实验性

定义一个由任意 HTML 元素生成的 `<image>` 值。

`paint()` (en-US)

定义了一个用 PaintWorklet 生成的 `<image>` 值。

计数器函数
-----

CSS 计数器函数通常与 `content` 属性一起使用，不过理论上，只要支持 `<string>`，就可以使用。

`counter()`

如果存在计数器，返回一个代表指定计数器当前值的字符串。

`counters()`

启用嵌套的计数器，如果存在，返回一个拼接字符串，代表命名计数器的当前值。

`symbols()` (en-US)

定义内联的计数器样式，直接作为一个属性的值。

形状函数
----

`<basic-shape>` CSS 数据类型表示一个图形形状。它被用于 `clip-path`、`offset-path` (en-US) 和 `shape-outside` 属性中。

`circle()` (en-US)

定义一个圆形。

`ellipse()` (en-US)

定义一个椭圆形。

`inset()` (en-US)

定义一个嵌入矩形。

`polygon()` (en-US)

定义一个多边形。

`path()` (en-US)

接受 SVG 路径字符串，以便绘制一个形状。

引用函数
----

以下函数被用作属性的值，以引用其他地方定义的值。

`attr()`

使用定义在 HTML 元素上的属性值。

`env()`

使用用户代理定义的环境变量。

`url()`

使用指定 URL 定义的文件。

`var()`

使用自定义属性值，而不是其他属性值的任何部分。

网格函数
----

以下函数用于定义一个 CSS 网格。

`fit-content()`

根据公式 `min(maximum size, max(minimum size, argument))` 将一个给定的尺寸固定在一个可用的尺寸范围中。

`minmax()`

定义了一个大于等于 *min* 且小于等于 *max* 的尺寸范围。

`repeat()`

代表轨道列表的一个重复片段，允许有大量的列或行表现出重复的模式。

字体函数
----

CSS 字体函数与 `font-variant-alternates` 属性一起使用，可以控制备用字形的使用。

`stylistic()`

启用单个字符的风格替代。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `salt`，如 `salt 2`。

`styleset()`

启用字符集的风格选择。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `ssXY`，例如 `ss02`。

`character-variant()`

为字符启用特定的风格选择。它类似于 `styleset()`，但不会为一组字符创建连贯的字形；单个字符会有独立的、不一定连贯的风格。参数是一个映射到数字的特定字体名称。它对应于 OpenType 值 `cvXY`，例如 `cv02`。

`swash()`

启用 swash 字形。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `swsh` 和 `cswh`，例如 `swsh 2` 和 `cswh 2`。

`ornaments()`

启用诸如 fleurons 和其他丁字形的装饰物。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `ornm`，例如 `ornm 2`。

`annotation()`

启用注解，如圈出的数字或倒置的字符。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 `nalt`，例如 `nalt 2`。

缓动函数
----

以下函数在过渡和动画属性中作为一个值使用。

`cubic-bezier()`

定义三次贝塞尔曲线的缓动函数。

`steps()`

在过渡中迭代若干次定格，每次定格停留相同的时间。

动画函数
----

以下函数被用作不同 `animation` 属性的值。

`scroll()` (en-US) 
实验性

设置一个元素的 `animation-timeline` (en-US)，使其依赖于最近的父级（有该滚动条）或根容器的特定轴上的滚动条。

参见
--

* CSS 值和单位
* CSS 介绍：值和单位