CSS 值函数

CSS 值函数是调用特殊数据处理或计算的语句,以返回一个 CSS 属性的 CSS 。CSS 值函数代表更复杂的数据类型,它们可能需要一些输入参数来计算返回值。

语法

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

值的语法以函数名称开始,后面是一个左括号 (。接下来是参数,然后用闭合小括号 ) 结束函数。

函数可以接受多个参数,这些参数的格式与 CSS 属性值类似。允许有空白字符,但在括号内是可选的。在一些函数符号中,多个参数用逗号隔开,而其他参数则使用空格。

备注: CSS 值函数是作为属性值使用的,不应该与伪类相混淆。函数式伪类语言伪类和几种树状结构伪类都需要参数值,但它们不是值函数。条件 @ 规则也不是值函数;括号是用来分组的。

转换函数

<transform-function> CSS 数据类型代表外观变换。它被用作 transform 属性的一个值。

转换函数

translateX()

水平移动一个元素。

translateY()

垂直移动一个元素。

translateZ() (en-US)

沿 z 轴方向移动一个元素。

translate()

在 2D 平面上移动一个元素。

translate3d()

在 3D 空间中移动一个元素。

旋转函数

rotateX()

沿水平轴旋转元素。

rotateY()

沿垂直轴旋转元素。

rotateZ()

沿 z 轴旋转元素。

rotate()

围绕 2D 平面的一个定点旋转一个元素。

rotate3d()

围绕 3D 平面的一个定轴旋转一个元素。

缩放函数

scaleX()

沿水平方向缩放元素。

scaleY() (en-US)

沿垂直方向缩放元素。

scaleZ() (en-US)

沿 z 轴方向缩放元素。

scale()

在 2D 平面上缩放元素。

scale3d() (en-US)

在 3D 空间中缩放元素。

倾斜函数

skewX()

沿水平方向倾斜元素。

skewY()

沿竖直方向倾斜元素。

skew()

在 2D 平面上倾斜元素。

矩阵函数

matrix()

描述一个齐次的二维变换矩阵。

matrix3d()

以 4x4 齐次矩阵的形式描述一个三维变换。

透视函数

perspective()

设置用户与平面 z=0 之间的距离。

数学函数

数学函数允许将 CSS 数字值写成数学表达式。

基本运算

calc()

在数字值上进行基本的算术运算。

比较函数

min()

计算一系列值的最小值。

max()

计算一系列值的最大值。

clamp()

计算最小值、中间值、最大值的中值。

阶跃值函数

round() (en-US) 实验性

根据舍入策略计算一个舍入的数字。

mod() (en-US) 实验性

计算一个数除以另一个数的模(与除数的符号相同)。

rem() (en-US) 实验性

计算一个数字除以另一个数字的余数(与被除数的符号相同)。

三角函数

sin()

计算一个数的三角正弦值。

cos()

计算一个数的三角余弦值。

tan()

计算一个数的三角正切值。

asin()

计算一个数的三角反正弦值。

acos()

计算一个数的三角反余弦值。

atan()

计算一个数的三角反正切值。

atan2()

计算平面内两个数字的三角反正切值。

指数函数

pow()

计算基数的幂次方值。

sqrt()

计算一个数的平方根。

hypot()

计算其参数平方之和的平方根。

log()

计算一个数的对数值。

exp()

计算一个数的 e 次方值。

符号函数

abs() (en-US) 实验性

计算一个数的绝对值。

sign() (en-US) 实验性

计算一个数的符号值(正值或负值)。

过滤器函数

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

blur()

增加图像的高斯模糊度。

brightness()

增加或减少图像的亮度。

contrast()

增加或减少图像的对比度。

drop-shadow()

在图像背后应用阴影。

grayscale()

转换图像为灰度图。

hue-rotate() (en-US)

改变图像的整体色调。

invert() (en-US)

反转图像的颜色。

opacity()

增加图像的透明度。

saturate() (en-US)

改变图像的整体饱和度。

sepia() (en-US)

增加图像偏棕褐色的程度。

颜色值函数

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

rgb()

根据红、绿、蓝和 alpha(透明度)成分来定义一个给定的颜色。

hsl()

根据色调、饱和度、亮度和 alpha(透明度)成分来定义一个给定的颜色。

hwb() (en-US)

根据色调、白度和黑度成分来定义一个给定的颜色。

lch() 实验性

根据亮度、色度和色调成分来定义一个给定的颜色。

oklch() 实验性

根据亮度、色度、色调和 alpha(透明度)成分来定义一个给定的颜色。

lab() 实验性

根据实验室色彩空间中的亮度、a 轴距离和 b 轴距离来定义一个给定的颜色。

oklab() 实验性

根据实验室色彩空间中的亮度、a 轴距离、b 轴距离和 alpha(透明度)来定义一个给定的颜色。

color() (en-US) 实验性

指定一个特定的色彩空间,而不是隐含的 sRGB 色彩空间。

color-mix() 实验性

在一个给定的色彩空间中,将两个颜色值按给定的数量混合。

color-contrast() 实验性

从一个颜色列表中选择最高的颜色对比度,与一个基础颜色值相比较。

device-cmyk() 实验性

以独立于设备的方式定义 CMYK 颜色。

图像函数

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

渐变函数

linear-gradient()

线性渐变沿着一条假想线逐渐过渡颜色。

radial-gradient()

径向渐变从一个中心点(原点)逐步过渡颜色。

conic-gradient()

锥形渐变是在一个圆周上逐步过渡颜色。

repeating-linear-gradient()

类似于 linear-gradient(),接受相同的参数,但它在所有方向上无限重复使用色标,以覆盖其整个容器。

repeating-radial-gradient()

类似于 radial-gradient(),接受相同的参数,但它在所有方向上无限重复使用色标,以覆盖其整个容器。

repeating-conic-gradient() (en-US)

类似于 conic-gradient(),接受相同的参数,但它在所有方向上无限重复使用色标,以覆盖其整个容器。

图像函数

image() (en-US) 实验性

定义一个 <image>,与 url() 函数类似,但增加了一些功能,包括指定图片的方向性和首选图片不被支持时的后备图片。

image-set() (en-US)

从一组给定的 CSS 图片中挑选最合适的图片,主要用于高像素密度的屏幕。

cross-fade() (en-US)

以定义的透明度混合两个或多个图像。

element() 实验性

定义一个由任意 HTML 元素生成的 <image> 值。

paint() (en-US)

定义了一个用 PaintWorklet 生成的 <image> 值。

计数器函数

CSS 计数器函数通常与 content 属性一起使用,不过理论上,只要支持 <string>,就可以使用。

counter()

如果存在计数器,返回一个代表指定计数器当前值的字符串。

counters()

启用嵌套的计数器,如果存在,返回一个拼接字符串,代表命名计数器的当前值。

symbols() (en-US)

定义内联的计数器样式,直接作为一个属性的值。

形状函数

<basic-shape> CSS 数据类型表示一个图形形状。它被用于 clip-pathoffset-path (en-US)shape-outside 属性中。

circle() (en-US)

定义一个圆形。

ellipse() (en-US)

定义一个椭圆形。

inset() (en-US)

定义一个嵌入矩形。

polygon() (en-US)

定义一个多边形。

path() (en-US)

接受 SVG 路径字符串,以便绘制一个形状。

引用函数

以下函数被用作属性的值,以引用其他地方定义的值。

attr()

使用定义在 HTML 元素上的属性值。

env()

使用用户代理定义的环境变量。

url()

使用指定 URL 定义的文件。

var()

使用自定义属性值,而不是其他属性值的任何部分。

网格函数

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

fit-content()

根据公式 min(maximum size, max(minimum size, argument)) 将一个给定的尺寸固定在一个可用的尺寸范围中。

minmax()

定义了一个大于等于 min 且小于等于 max 的尺寸范围。

repeat()

代表轨道列表的一个重复片段,允许有大量的列或行表现出重复的模式。

字体函数

CSS 字体函数与 font-variant-alternates 属性一起使用,可以控制备用字形的使用。

stylistic()

启用单个字符的风格替代。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 salt,如 salt 2

styleset()

启用字符集的风格选择。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 ssXY,例如 ss02

character-variant()

为字符启用特定的风格选择。它类似于 styleset(),但不会为一组字符创建连贯的字形;单个字符会有独立的、不一定连贯的风格。参数是一个映射到数字的特定字体名称。它对应于 OpenType 值 cvXY,例如 cv02

swash()

启用 swash 字形。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 swshcswh,例如 swsh 2cswh 2

ornaments()

启用诸如 fleurons 和其他丁字形的装饰物。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 ornm,例如 ornm 2

annotation()

启用注解,如圈出的数字或倒置的字符。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 nalt,例如 nalt 2

缓动函数

以下函数在过渡和动画属性中作为一个值使用。

cubic-bezier()

定义三次贝塞尔曲线的缓动函数。

steps()

在过渡中迭代若干次定格,每次定格停留相同的时间。

动画函数

以下函数被用作不同 animation 属性的值。

scroll() (en-US) 实验性

设置一个元素的 animation-timeline (en-US),使其依赖于最近的父级(有该滚动条)或根容器的特定轴上的滚动条。

参见