CSS 函数允许您动态生成 CSS 属性值。 这些函数接受参数并返回一个可以用来代替静态值的值。

语法

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

  • 函数名称首先出现在值语法中，后跟左括号（接下来是参数，右括号）完成函数。

  • 函数接受多个参数，它们的格式与 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()描述齐次二维变换矩阵。
matrix3d()将 3D 变换描述为 4×4 齐次矩阵。

透视函数

下表列出了透视函数：

功能说明
perspective()设置用户与 z=0 平面之间的距离。
perspective()设置用户与 z=0 平面之间的距离。 td>

数学函数

数学表达式可以在 CSS 中使用数学函数来表示数值。

基本算术函数

下表列出了基本算术函数：

功能说明
calc()对数值执行基本算术计算。

比较函数

下表列出了比较函数：

功能说明
min()确定给定值集中的最小值。
max()确定给定值列表中的最大值。
clamp()计算最小值、中心和最大值的中心

步进值函数

下表列出了步进值函数：

函数描述
round()根据舍入策略计算舍入数。

三角函数

下表列出了三角函数功能：

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

过滤函数

CSS 数据类型 表示能够改变输入图像外观的图形效果。它在滤镜和背景滤镜属性中使用。

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

颜色函数

CSS 数据类型 定义了表示颜色的各种方式。

函数描述
rgb()根据其红色、绿色、蓝色和 alpha（透明度）分量指定给定颜色。
hsl()根据色调、饱和度、亮度和 alpha（透明度）分量指定给定颜色。
hwb()根据色调、白度和黑度分量指定给定颜色。
lch()根据亮度、色度和色调分量指定给定颜色。
oklch()根据亮度、色度、色调和 alpha（透明度）分量指定给定颜色。
lab()根据亮度、a 轴距离和 b- 指定给定颜色实验室色彩空间中的轴距离。
oklab()指定给定颜色根据实验室色彩空间中的亮度、a 轴距离、b 轴距离和 alpha（透明度）。
color()指定特定的指定色彩空间，而不是隐式 sRGB 色彩空间
color-mix()按照给定的量混合给定色彩空间中的两个颜色值。

图像函数

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

渐变函数

下表列出了渐变函数：

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

图像函数

下表列出了图像函数：

函数描述
image-set()从给定的集合中选择最合适的 CSS 图像，主要用于高像素密度屏幕。
cross-fade()以定义的透明度混合两个或多个图像。
paint()定义使用 PaintWorklet 生成的 值。

计数器函数

CSS 计数器函数理论上可以在 可用的任何地方使用，但是它们通常与 content 属性结合使用。

功能描述
counter()返回一个表示指定计数器当前值的字符串（如果存在）是一。
counters()启用嵌套计数器，返回连接的字符串表示指定计数器的当前值（如果有）。

形状函数

CSS 数据类型 表示视觉形状，用于 Clip-path、offset-path 和 shape-outside 等属性。

功能说明
circle()定义圆形。
ellipse()定义椭圆形状。
inset()定义插入矩形形状。
polygon()定义多边形形状。
path()接受 SVG 路径字符串以绘制形状。

引用函数

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

函数描述
attr()使用 HTML 元素上定义的属性.
env()使用定义为环境变量的用户代理。
url()使用指定 URL 中的文件。
var()使用自定义属性值而不是另一个值的任何部分属性。

网格函数

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

函数描述
fit-content()根据公式 min(最大尺寸, max(最小尺寸, 参数)) 将给定尺寸限制为可用尺寸。
minmax()定义大于或等于 min 且小于或等于 max 的大小范围。
repeat()表示曲目列表的重复片段，允许有大量列或表现出重复模式的行。

字体功能

替代字形使用通过使用 CSS 进行管理字体函数与 font-variant-alternates 属性结合使用。

函数说明
stylistic()此函数使用与数字关联的特定于字体的名称激活某些字符的样式替代。
styleset()此函数激活字符组的样式替代。该参数是特定于字体的与数字关联的名称，例如 ss02。
character-variant()与为字符集创建连贯字形的 styleset() 不同，此函数允许单个字符出现不同的风格变化。
swash()此函数激活带有与数字关联的特定字体名称的花饰字形，例如 swsh 2 和 cswh 2。
ornaments()此函数使用与数字关联的特定于字体的名称（例如 ornm）激活装饰，例如 fleurons 和 dingbat 字形2.
annotation()该函数允许注释，例如带圆圈的数字或使用与数字关联的特定于字体的名称来反转字符，例如 nalt 2

缓动函数

过渡和动画属性的值来自以下函数。

函数说明
linear()在其点之间线性插值的缓动函数..
cubic-bezier()定义三次方的缓动函数贝塞尔曲线。
steps()沿着过渡沿指定数量的停止点迭代，以相等的时间长度显示每个停止点。