CSS 值函数 - CSS | MDN

语法

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

值语法以函数名开始，后跟一个左括号 (。接下来是参数，函数以右括号 ) 结尾。

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

备注： CSS 值函数被用作属性值，不应与伪类混淆。函数式伪类、语言伪类以及一些树结构伪类需要参数值，但它们不是值函数。条件 at-rules 规则也不是值函数；括号用于分组。

变换函数

<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(): 对数值执行基本算术计算。
calc-size(): 对固有尺寸值（如 auto、fit-content 和 max-content）进行计算，这些值不受 calc() 函数支持。

比较函数

min(): 计算一组值中的最小值。
max(): 计算一组值中的最大值。
clamp(): 计算一个最小值、一个中心值和一个最大值中的中间值。

步进值函数

round(): 根据舍入策略计算一个舍入后的数字。
mod(): 计算一个数除以另一个数时的模（与除数符号相同）。
progress(): 计算一个值在另外两个值（一个起始值和一个结束值）之间的位置。结果表示为 0 到 1 之间的一个数字，代表在起始值和结束值之间的进度。
rem(): 计算一个数除以另一个数时的余数（与被除数符号相同）。

三角函数

sin(): 计算一个数的三角正弦值。
cos(): 计算一个数的三角余弦值。
tan(): 计算一个数的三角正切值。
asin(): 计算一个数的三角反正弦值。
acos(): 计算一个数的三角反余弦值。
atan(): 计算一个数的三角反正切值。
atan2(): 计算平面上两个数的三角反正切值。

指数函数

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

符号相关函数

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

滤镜函数

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

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

颜色函数

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

rgb(): 根据其红、绿、蓝和 alpha（透明度）分量定义一种给定的颜色。
hsl(): 根据其色相、饱和度、亮度和 alpha（透明度）分量定义一种给定的颜色。
hwb(): 根据其色相、白度和黑度分量定义一种给定的颜色。
lch(): 根据其亮度、色度和色相分量定义一种给定的颜色。
oklch(): 根据其亮度、色度、色相和 alpha（透明度）分量定义一种给定的颜色。
lab(): 根据其在 Lab 色彩空间中的亮度、a 轴距离和 b 轴距离定义一种给定的颜色。
oklab(): 根据其在 Lab 色彩空间中的亮度、a 轴距离、b 轴距离和 alpha（透明度）定义一种给定的颜色。
color(): 指定一个特定的、指定的色彩空间，而不是隐式的 sRGB 色彩空间。
color-mix(): 在给定的色彩空间中，按给定的量混合两种颜色值。
contrast-color(): 为给定颜色返回一个具有最大颜色对比度的颜色。
device-cmyk(): 以设备相关的方式定义 CMYK 颜色。
light-dark(): 根据当前的配色方案，从提供的两种颜色中返回一种。
dynamic-range-limit-mix(): 创建一个自定义的最大亮度限制，该限制是按指定百分比混合不同的 dynamic-range-limit 关键字的结果。

图像函数

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

渐变函数

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(): 直接以内联方式定义计数器样式，作为属性的值。

形状函数

基本形状

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

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

其他形状函数

ray(): 与 offset-path 一起使用；定义动画元素可以遵循的线段。
superellipse(): 定义椭圆的曲率；可用于指定一个 <corner-shape-value>，与 corner-shape 及其组成属性和相关属性一起使用。

引用函数

以下函数用作属性的值，以引用在别处定义的值。

attr(): 使用在 HTML 元素上定义的属性。
env(): 使用定义为环境变量的用户代理值。
if(): 根据样式查询、媒体查询或特性查询的结果有条件地设置属性值。
url(): 使用指定 URL 的文件。
var(): 使用自定义属性值来代替另一属性值的任何部分。

网格函数

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

fit-content(): 根据公式 min(最大尺寸, max(最小尺寸, 参数)) 将给定尺寸限制在可用尺寸内。
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。