CSS - 值函数
CSS value functions（值函数）允许您动态生成 CSS 属性的值。这些函数接受参数并返回一个值，可用于替换静态值。
语法
selector {
property: function([argument]? [, argument]!);
}
函数名在值语法中首先出现，后面跟着开括号 (。参数紧随其后，闭括号 ) 完成函数定义。
函数接受多个参数，其格式与 CSS 属性值相同。
虽然是可选的，但括号内允许使用空白字符。某些函数记号中使用逗号分隔多个参数，而其他函数则使用空格分隔。
Transform Functions
CSS 数据类型 <transform-function> 表示视觉变换，用作 transform 属性的值。
Translate Functions
下表列出了 translate functions：
| Functions | 描述 |
|---|---|
| translateX() | 水平平移元素。 |
| translateY() | 垂直平移元素。 |
| translateZ() | 沿 z 轴平移元素。 |
| translate() | 在 2D 平面上平移元素。 |
| translate3d() | 在 3D 空间中平移元素。 |
Rotation Functions
下表列出了 rotation functions：
| Functions | 描述 |
|---|---|
| rotateX() | 围绕水平轴旋转元素。 |
| rotateY() | 围绕垂直轴旋转元素。 |
| rotateZ() | 围绕 z 轴旋转元素。 |
| rotate() | 在 2D 平面上围绕固定点旋转元素。 |
| rotate3d() | 在 3D 空间中围绕固定轴旋转元素。 |
Scaling Functions
下表列出了 scaling functions：
| Functions | 描述 |
|---|---|
| scaleX() | 水平方向放大或缩小元素。 |
| scaleY() | 垂直方向放大或缩小元素。 |
| scaleZ() | 沿 z 轴放大或缩小元素。 |
| scale() | 在 2D 平面上放大或缩小元素。 |
| scale3d() | 在 3D 空间中放大或缩小元素。 |
Skew Functions
下表列出了 skew functions：
| Functions | 描述 |
|---|---|
| skewX() | 水平方向倾斜元素。 |
| skewY() | 垂直方向倾斜元素。 |
| skew() | 在 2D 平面上倾斜元素。 |
Matrix Functions
下表列出了 matrix functions：
| Functions | 描述 | matrix() | 描述 2D 齐次变换矩阵。 |
|---|---|
| matrix3d() | 将 3D 变换描述为 4×4 齐次矩阵。 |
Perspective Functions
下表列出了 perspective functions：
| Functions | 描述 | perspective() | 设置用户与 z=0 平面之间的距离。 |
|---|
数学函数
CSS 中可以使用数学函数来表示数值。
基本算术函数
下表列出了基本算术函数：
| Function | 描述 |
|---|---|
| calc() | 对数值执行基本算术计算。 |
比较函数
下表列出了比较函数：
| Function | 描述 |
|---|---|
| min() | 从给定值集中确定最小值。 |
| max() | 从给定的值列表中确定最大值。 |
| clamp() | 计算最小值、中间值和最大值的中间值。 |
阶梯值函数
下表列出了阶梯值函数：
| Function | 描述 |
|---|---|
| round() | 根据舍入策略计算一个四舍五入的数字。 |
三角函数
下表列出了三角函数：
| Function | 描述 |
|---|---|
| sin() | 计算一个数的三角正弦值。 |
| cos() | 计算一个数的三角余弦值。 |
| tan() | 计算一个数的三角正切值。 |
| asin() | 计算一个数的三角反正弦值。 |
| acos() | 计算一个数的三角反余弦值。 |
| atan() | 计算一个数的三角反正切值。 |
| atan2() | 计算平面中两个数的三角反正切值。 |
滤镜函数
CSS 数据类型 <filter-function> 表示能够改变输入图像外观的图形效果。它用于 filter 和 backdrop-filter 属性中。
| Function | 描述 |
|---|---|
| blur() | 增加图像的高斯模糊。 |
| brightness() | 使图像变亮或变暗。 |
| contrast() | 增加或减少图像对比度。 |
| drop-shadow() | 在图像后面应用投影阴影。 |
| grayscale() | 将图像转换为灰度。 |
| hue-rotate() | 更改图像的整体色调。 |
| invert() | 反转图像的颜色。 |
| opacity() | 为图像添加透明度。 |
| saturate() | 更改图像的整体饱和度。 |
| sepia() | 增加图像的棕褐色调。 |
颜色函数
CSS 数据类型 <color> 定义了多种表示颜色的方式。
| Function | 描述 |
|---|---|
| rgb() | 根据其红、绿、蓝和 alpha（透明度）分量指定一种颜色。 |
| hsl() | 根据其色调、饱和度、明度和 alpha（透明度）分量指定一种颜色。 |
| hwb() | 根据其色调、白色度和黑色度分量指定一种颜色。 |
| lch() | 根据其明度、色度和色调分量指定一种颜色。 |
| oklch() | 根据其明度、色度、色调和 alpha（透明度）分量指定一种颜色。 |
| lab() | 根据其在 lab 颜色空间中的明度、a 轴距离和 b 轴距离指定一种颜色。 |
| oklab() | 根据其在 lab 颜色空间中的明度、a 轴距离、b 轴距离和 alpha（透明度）指定一种颜色。 |
| color() | 指定特定的颜色空间，而不是隐式的 sRGB 颜色空间。 |
| color-mix() | 在给定的颜色空间中按给定比例混合两种颜色值。 |
图像函数
CSS 数据类型
渐变函数
下表列出了渐变函数：
| 函数 | 描述 |
|---|---|
| linear-gradient() | 线性渐变沿着一条虚构的直线逐步过渡颜色。 |
| radial-gradient() | 径向渐变从中心点（原点）逐步过渡颜色。 |
| conic-gradient() | 圆锥渐变围绕圆周逐步过渡颜色。 |
| repeating-linear-gradient() | 类似于 linear-gradient()，接受相同的参数，但它在所有方向上无限重复颜色停止点，以覆盖整个容器。 |
| repeating-radial-gradient() | 类似于 radial-gradient()，接受相同的参数，但它在所有方向上无限重复颜色停止点，以覆盖整个容器。 |
| repeating-conic-gradient() | 类似于 conic-gradient()，接受相同的参数，但它在所有方向上无限重复颜色停止点，以覆盖整个容器。 |
图像函数
下表列出了图像函数：
| 函数 | 描述 |
|---|---|
| image-set() | 从给定集合中选择最合适的 CSS 图像，主要用于高像素密度屏幕。 |
| cross-fade() | 在指定的透明度下混合两张或多张图像。 |
| paint() | 定义使用 PaintWorklet 生成的 <image> 值。 |
计数器函数
CSS 计数器函数理论上可以在任何提供
| 函数 | 描述 |
|---|---|
| counter() | 如果存在名为的计数器，则返回表示其当前值的字符串。 |
| counters() | 启用嵌套计数器，如果存在，则返回表示名为计数器当前值的连接字符串。 |
形状函数
CSS 数据类型
| 函数 | 描述 |
|---|---|
| circle() | 定义圆形形状。 |
| ellipse() | 定义椭圆形状。 |
| inset() | 定义内嵌矩形形状。 |
| polygon() | 定义多边形形状。 |
| path() | 接受 SVG path 字符串，以启用绘制形状。 |
引用函数
为了引用其他地方定义的值，以下函数用作属性的值。
| 函数 | 描述 |
|---|---|
| attr() | 使用 HTML 元素上定义的属性。 |
| env() | 使用用户代理定义的环境变量。 |
| url() | 使用指定 URL 的文件。 |
| var() | 使用自定义属性值代替另一个属性的任何部分值。 |
网格函数
以下函数用于定义 CSS Grid。
| 函数 | 描述 |
|---|---|
| fit-content() | 根据公式 min(maximum size, max(minimum size, argument)) 将给定大小限制到可用大小。 |
| minmax() | 定义一个大小范围，大于或等于 min，小于或等于 max。 |
| repeat() | 表示轨道列表的重复片段，允许大量显示重复模式的列或行。 |
字体函数
备用字形的使用通过结合 CSS font-variant-alternates 属性来使用 CSS 字体函数进行管理。
| 函数 | 描述 |
|---|---|
| stylistic() | 此函数使用与数字关联的字体特定名称，为某些字符激活 stylistic alternates。 |
| styleset() | 此函数为字符组激活 stylistic alternatives。参数是与数字关联的字体特定名称，例如 ss02。 |
| character-variant() | 此函数允许单个字符的独特 stylistic variations，不同于 styleset()，后者为字符集创建连贯的字形。 |
| swash() | 此函数使用与数字关联的字体特定名称激活 swash 字形，例如 swsh 2 和 cswh 2。 |
| ornaments() | 此函数使用与数字关联的字体特定名称激活 ornaments，例如花饰和 dingbat 字形，如 ornm 2。 |
| annotation() | 此函数允许使用与数字关联的字体特定名称激活 annotations，例如圆圈数字或反转字符，例如 nalt 2 |
缓动函数
transition 和 animation 属性的值来自以下函数。
| 函数 | 描述 |
|---|---|
| linear() | 在点之间线性插值的缓动函数。 |
| cubic-bezier() | 定义立方 Bézier 曲线的缓动函数。 |
| steps() | 沿 transition 的指定数量的 stops 迭代，每个 stop 显示等长的时间。 |