CSS - 值函数

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

语法

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

函数名称首先出现在值语法中，后跟一个开括号 (。参数紧随其后，一个闭括号 ) 完成函数。
函数接受多个参数，其格式与 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 中，使用数学函数表示数值。

基本算术函数

下表列出了基本算术函数

函数	描述
calc()	对数值执行基本算术计算。

比较函数

下表列出了比较函数

函数	描述
min()	确定给定值集中最小值。
max()	确定给定值列表中的最大值。
clamp()	计算最小值、中间值和最大值之间的中间值。

阶梯值函数

下表列出了阶梯值函数

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

三角函数

下表列出了三角函数

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

滤镜函数

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()	在给定的颜色空间中，按给定的量混合两个颜色值。

图像函数

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

渐变函数

下表列出了渐变函数

函数	描述
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 计数器函数可以在任何可以使用 <string> 的地方使用，但通常与 content 属性结合使用。

函数	描述
counter()	返回一个字符串，表示如果存在则表示命名计数器的当前值。
counters()	启用嵌套计数器，返回一个连接的字符串，表示如果存在则表示命名计数器的当前值。

形状函数

CSS 数据类型 <basic-shape> 表示视觉形状，并在诸如 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 2。
annotation()	此函数允许注释，例如带圈数字或倒置字符，使用与数字关联的特定于字体的名称，例如 nalt 2。

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

缓动函数

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

打印页面