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 和 backgrounddrop-filter 属性中使用。

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

颜色函数

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

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

图像功能

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

梯度函数

下表列出了梯度函数：

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

图像功能

下表列出了图像功能：

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

计数器功能

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

功能 描述
counter() R返回一个字符串，该字符串表示命名计数器的当前值（如果有）。
counters() E启用嵌套计数器，返回一个串联字符串，表示命名计数器的当前值（如果有）。

形状函数

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

功能 描述
circle() D定义圆形。
ellipse() D定义椭圆形状。
inset() D定义一个插入的矩形形状。
polygon() D定义多边形形状。
path() A接受 SVG 路径字符串以启用要绘制的形状。

引用函数

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

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

网格函数

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

功能 描述
fit-content() C根据公式 min（maximum size， max（minimum size， argument）） 将给定尺寸夹紧为可用尺寸。
minmax() D定义大于或等于最小值和小于或等于最大值的大小范围。
repeat() Re表示轨道列表的重复片段，允许大量列或行呈现重复模式。

字体函数

备用字形的使用是通过结合使用 CSS 字体函数和 font-variant-alternates 属性来管理的。

功能 描述
stylistic() T此功能使用与数字关联的字体特定名称激活某些字符的样式替代词。
styleset() T此功能可激活字符组的样式替代。该参数是与数字关联的特定于字体的名称，例如 ss02。
character-variant() T与styleset（）不同，此函数允许单个字符具有不同的样式变化，styleset（）为字符集创建连贯的字形。
swash() T此功能使用与数字关联的字体特定名称激活 swash 字形，例如 swsh 2 和 cswh 2。
ornaments() T此功能使用与数字关联的字体特定名称（如 ornm 2）激活装饰品，例如 fleurons 和 dingbat 字形。
annotation() T此功能允许使用与数字关联的字体特定名称（例如 nalt 2）进行注释，例如带圆圈的数字或倒置字符

缓动函数

transition 和 animation 属性的值来自以下函数。

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