CSS 值函数

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

语法

css

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

值语法以函数名称开头，后跟左括号 (。接下来是参数，函数以右括号 ) 结束。

函数可以接受多个参数，这些参数的格式类似于 CSS 属性值。允许使用空格，但在括号内是可选的。在某些函数表示法中，多个参数用逗号分隔，而在其他情况下则使用空格。

注意：CSS 值函数用作属性值，不应与伪类混淆。功能性伪类、语言伪类和一些树结构伪类需要参数值，但它们不是值函数。条件 @规则也不是值函数；括号用于分组。

转换函数

<transform-function> CSS 数据类型表示外观变换。它用作 transform 属性的值。

平移函数

translateX(): 水平平移元素。
translateY(): 垂直平移元素。
translateZ(): 沿 z 轴平移元素。
translate(): 在 2D 平面上平移元素。
translate3d(): 在 3D 空间中平移元素。

旋转函数

rotateX(): 绕水平轴旋转元素。
rotateY(): 绕垂直轴旋转元素。
rotateZ(): 绕 z 轴旋转元素。
rotate(): 绕 2D 平面上固定点旋转元素。
rotate3d(): 绕 3D 空间中固定轴旋转元素。

缩放函数

scaleX(): 水平缩放元素。
scaleY(): 垂直缩放元素。
scaleZ(): 沿 z 轴缩放元素。
scale(): 在 2D 平面上缩放元素。
scale3d(): 在 3D 空间中缩放元素。

倾斜函数

skewX(): 水平方向倾斜元素。
skewY(): 垂直方向倾斜元素。
skew(): 在 2D 平面上倾斜元素。

矩阵函数

matrix(): 描述一个齐次 2D 变换矩阵。
matrix3d(): 将 3D 变换描述为一个 4×4 齐次矩阵。

透视函数

perspective(): 设置用户和 z=0 平面之间的距离。

数学函数

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

以下每个页面都包含有关数学函数语法、浏览器兼容性数据、示例等的详细信息。有关 CSS 数学函数的整体介绍，请参阅使用 CSS 数学函数。

基本算术

calc(): 对数值执行基本算术运算。

比较函数

min(): 计算值列表中最小的值。
max(): 计算值列表中最大的值。
clamp(): 计算最小值、中间值和最大值的中心值。

阶梯值函数

round(): 根据舍入策略计算舍入后的数字。
mod(): 计算一个数除以另一个数时的模数（与除数符号相同）。
rem(): 计算一个数除以另一个数时的余数（与被除数符号相同）。

三角函数

计算数字的三角正弦。

计算数字的三角余弦。

计算数字的三角正切。

计算数字的反三角正弦。

计算数字的反余弦三角函数。

计算数字的反正切三角函数。

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

指数函数

pow(): 计算底数的某个次幂。
sqrt(): 计算数字的平方根。
hypot(): 计算其参数的平方和的平方根。
log(): 计算数字的对数。
exp(): 计算e的某个次幂。

与符号相关的函数

abs(): 计算数字的绝对值。
sign(): 计算数字的符号（正或负）。

过滤器函数

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

blur(): 增加图像的高斯模糊。
brightness(): 使图像变亮或变暗。
contrast(): 增加或减少图像对比度。
drop-shadow(): 在图像后面应用投影。
grayscale(): 将图像转换为灰度。
hue-rotate(): 更改图像的整体色调。
invert(): 反转图像的颜色。
opacity(): 为图像添加透明度。
saturate(): 更改图像的整体饱和度。
sepia(): 增加图像的棕褐色。

颜色函数

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

rgb(): 根据其红色、绿色、蓝色和 alpha（透明度）分量定义给定颜色。
hsl(): 根据其色调、饱和度、亮度和 alpha（透明度）分量定义给定颜色。
hwb(): 根据其色调、白色和黑色分量定义给定颜色。
lch(): 根据其亮度、彩度和色调分量定义给定颜色。
oklch(): 根据其亮度、彩度、色调和 alpha（透明度）分量定义给定颜色。
lab(): 根据其亮度、Lab 颜色空间中的 a 轴距离和 b 轴距离定义给定颜色。
oklab(): 根据其亮度、Lab 颜色空间中的 a 轴距离、b 轴距离和 alpha（透明度）定义给定颜色。
color(): 指定特定的颜色空间，而不是隐式 sRGB 颜色空间。
color-mix(): 按给定量混合给定颜色空间中的两个颜色值。
color-contrast(): 从颜色列表中选择与基础颜色值对比度最高的颜色。
device-cmyk(): 以设备相关的形式定义 CMYK 颜色。
light-dark(): 根据当前颜色方案返回两个提供的颜色之一。

图像函数

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

渐变函数

linear-gradient(): 线性渐变沿一条假想的线逐渐过渡颜色。
radial-gradient(): 径向渐变从中心点（原点）逐渐过渡颜色。
conic-gradient(): 圆锥渐变围绕圆圈逐渐过渡颜色。
repeating-linear-gradient(): 类似于linear-gradient()，并采用相同的参数，但它在所有方向上无限重复颜色停止，以覆盖其整个容器。
repeating-radial-gradient(): 类似于radial-gradient()，并采用相同的参数，但它在所有方向上无限重复颜色停止，以覆盖其整个容器。
repeating-conic-gradient(): 类似于conic-gradient()，并采用相同的参数，但它在所有方向上无限重复颜色停止，以覆盖其整个容器。

图像函数

image(): 以类似于`url()` 函数的方式定义`<image>`，但增加了其他功能，包括指定图像的方向性和首选图像不支持时的后备图像。
image-set(): 从给定集中选择最合适的 CSS 图像，主要用于高像素密度屏幕。
cross-fade(): 以定义的透明度混合两个或多个图像。
element(): 定义从任意 HTML 元素生成的`<image>` 值。
paint(): 定义使用 PaintWorklet 生成的`<image>` 值。

计数器函数

CSS 计数器函数通常与`content` 属性一起使用，尽管理论上，它们可以在任何支持`<string>` 的地方使用。

counter(): 返回一个字符串，表示如果存在则表示命名计数器的当前值。
counters(): 启用嵌套计数器，返回一个连接的字符串，表示如果存在则表示命名计数器的当前值。
symbols(): 内联定义计数器样式，直接作为属性的值。

形状函数

CSS 的`<basic-shape>` 数据类型表示图形形状。它用于`clip-path`、`offset-path` 和 `shape-outside` 属性。

circle(): 定义圆形形状。
ellipse(): 定义椭圆形形状。
inset(): 定义内嵌矩形形状。
rect(): 使用参考框顶部和左侧边缘的距离定义矩形形状。
xywh(): 使用参考框顶部和左侧边缘的指定距离以及矩形宽度和高度定义矩形形状。
polygon(): 定义多边形形状。
path(): 接受 SVG 路径字符串以启用形状绘制。
shape(): 接受一个逗号分隔的命令列表，定义要绘制的形状。

参考函数

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

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(): 启用`连笔` 字形。参数是映射到数字的特定于字体的名称。它对应于 OpenType 值swsh 和cswh，例如swsh 2 和cswh 2。
ornaments(): 启用装饰，例如`花饰` 和其他装饰字形。参数是映射到数字的特定于字体的名称。它对应于 OpenType 值ornm，例如ornm 2。
annotation(): 启用注释，例如带圆圈的数字或倒置字符。参数是映射到数字的特定于字体的名称。它对应于 OpenType 值nalt，例如nalt 2。

缓动函数

以下函数用作过渡和动画属性的值。

linear(): 线性插值其点之间的缓动函数。
cubic-bezier(): 定义三次贝塞尔曲线的缓动函数。
steps(): 沿着过渡过程中指定数量的停止点进行迭代，并在相同的时间长度内显示每个停止点。

动画函数

以下函数用作不同的animation-timeline属性的值。有关这些的更多详细信息，请参见`animation-timeline`。

scroll(): 将元素的`animation-timeline` 设置为匿名滚动进度时间线。
view(): 将元素的`animation-timeline` 设置为匿名视图进度时间线。

锚点定位函数

锚点定位函数用于相对于其关联的锚点元素的位置和大小来定位和调整锚点定位元素的大小。

anchor(): 返回相对于锚点定位元素的关联锚点元素边缘位置的长度。
anchor-size(): 返回相对于关联锚点元素大小的长度。