术语简介

CSS属性值函数（CSS value functions），是调用特殊数据处理或计算后返回CSS数值，应用于CSS属性。CSS属性值函数代表了更复杂的数据类型，其可能需要一些输入参数来计算返回值。

语法格式

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

其格式为：函数名后跟随英文括号“()”，参数放在括号中，多个参数以英文逗号“,”隔开。

CSS属性值函数可以通过接收一个或多个参数，通过浏览器渲染引擎的特定计算，动态得出属性的数值，从而制作出具有更高适应性的web界面。

CSS属性值函数的分类

分类

子类

函数及说明

变形函数

Transform Functions

转换函数

Translate Functions

translateX()：水平移动一个元素。translateY()：垂直移动一个元素。translateZ()：沿 z 轴方向移动一个元素。translate()：在 2D 平面上移动一个元素。translate3d()：在 3D 空间中移动一个元素。

旋转函数

Rotation Functions

rotateX()：沿水平轴旋转元素。rotateY()：沿垂直轴旋转元素。rotateZ()：沿 z 轴旋转元素。rotate()：围绕 2D 平面的一个定点旋转一个元素。rotate3d()：围绕 3D 平面的一个定轴旋转一个元素。

缩放函数

Scaling Functions

scaleX()：沿水平方向缩放元素。scaleY()：沿垂直方向缩放元素。scaleZ()：沿 z 轴方向缩放元素。scale()：在 2D 平面上缩放元素。scale3d()：在 3D 空间中缩放元素。

倾斜函数

Skew Functions

skewX()：沿水平方向倾斜元素。skewY()：沿竖直方向倾斜元素。skew()：在 2D 平面上倾斜元素。

矩阵函数

Matrix Functions

matrix()：描述一个齐次的二维变换矩阵。matrix3d()：以 4x4 齐次矩阵的形式描述一个三维变换。

透视函数

Perspective Functions

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

数学函数

Math Functions

基本运算

Basic arithmetic

calc()：在数字值上进行基本的算术运算。

比较函数

Comparison Functions

min()：计算一系列值的最小值。max()：计算一系列值的最大值。clamp()：计算最小值、中间值、最大值的中值。

阶跃值函数(实验性)

Stepped Value Functions

round()：根据舍入策略计算一个舍入的数字。mod()：计算一个数除以另一个数的模（与除数的符号相同）。rem()：计算一个数字除以另一个数字的余数（与被除数的符号相同）。

三角函数

Trigonometric Functions

sin()：计算一个数的三角正弦值。cos()：计算一个数的三角余弦值。tan()：计算一个数的三角正切值。asin()：计算一个数的三角反正弦值。acos()：计算一个数的三角反余弦值。atan()：计算一个数的三角反正切值。atan2()：计算平面内两个数字的三角反正切值。

指数函数

Exponential Functions

pow()：计算基数的幂次方值。sqrt()：计算一个数的平方根。hypot()：计算其参数平方之和的平方根。log()：计算一个数的对数值。exp()：计算一个数的 e 次方值。

符号函数(实验性)

Sign-related Functions

abs()：计算一个数的绝对值。sign()：计算一个数的符号值（正值或负值）。

过滤器函数

Filter Functions

-

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

颜色值函数

Color Functions

-

rgb()：根据红、绿、蓝和 alpha（透明度）成分来定义一个给定的颜色。hsl()：根据色调、饱和度、亮度和 alpha（透明度）成分来定义一个给定的颜色。hwb()：根据色调、白度和黑度成分来定义一个给定的颜色。lch() 【实验性】根据亮度、色度和色调成分来定义一个给定的颜色。oklch() 【实验性】根据亮度、色度、色调和 alpha（透明度）成分来定义一个给定的颜色。lab() 【实验性】根据实验室色彩空间中的亮度、a 轴距离和 b 轴距离来定义一个给定的颜色。oklab() 【实验性】根据实验室色彩空间中的亮度、a 轴距离、b 轴距离和 alpha（透明度）来定义一个给定的颜色。color() 【实验性】指定一个特定的色彩空间，而不是隐含的 sRGB 色彩空间。color-mix() 【实验性】在一个给定的色彩空间中，将两个颜色值按给定的数量混合。color-contrast() 【实验性】从一个颜色列表中选择最高的颜色对比度，与一个基础颜色值相比较。device-cmyk() 【实验性】以独立于设备的方式定义 CMYK 颜色。

图像函数

Image Functions

渐变函数

Gradient Functions

linear-gradient()：线性渐变沿着一条假想线逐渐过渡颜色。radial-gradient()：径向渐变从一个中心点（原点）逐步过渡颜色。conic-gradient()：锥形渐变是在一个圆周上逐步过渡颜色。repeating-linear-gradient()：类似于 linear-gradient()，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。repeating-radial-gradient()：类似于 radial-gradient()，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。repeating-conic-gradient()：类似于 conic-gradient()，接受相同的参数，但它在所有方向上无限重复使用色标，以覆盖其整个容器。

图像函数

Image Functions

image() 【实验性】定义一个 <image>，与 url() 函数类似，但增加了一些功能，包括指定图片的方向性和首选图片不被支持时的后备图片。image-set()：从一组给定的 CSS 图片中挑选最合适的图片，主要用于高像素密度的屏幕。cross-fade()：以定义的透明度混合两个或多个图像。element() 【实验性】定义一个由任意 HTML 元素生成的 <image> 值。paint()：定义了一个用 PaintWorklet 生成的 <image> 值。

计数器函数

Counter Functions

-

counter()：如果存在计数器，返回一个代表指定计数器当前值的字符串。counters()：启用嵌套的计数器，如果存在，返回一个拼接字符串，代表命名计数器的当前值。symbols()：定义内联的计数器样式，直接作为一个属性的值。

形状函数

Shape Functions

-

circle()：定义一个圆形。ellipse()：定义一个椭圆形。inset()：定义一个嵌入矩形。polygon()：定义一个多边形。path()：接受 SVG 路径字符串，以便绘制一个形状。

引用函数

Reference Functions

-

attr()：使用定义在 HTML 元素上的属性值。env()：使用用户代理定义的环境变量。url()：使用指定 URL 定义的文件。var()：使用自定义属性值，而不是其他属性值的任何部分。

网格函数

Grid Functions

-

fit-content()：根据公式 min(maximum size, max(minimum size, argument)) 将一个给定的尺寸固定在一个可用的尺寸范围中。minmax()：定义了一个大于等于 min 且小于等于 max 的尺寸范围。repeat()：代表轨道列表的一个重复片段，允许有大量的列或行表现出重复的模式。

字体函数

Font Functions

-

stylistic()：启用单个字符的风格替代。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 salt，如 salt 2。styleset()：启用字符集的风格选择。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 ssXY，例如 ss02。character-variant()：为字符启用特定的风格选择。它类似于 styleset()，但不会为一组字符创建连贯的字形；单个字符会有独立的、不一定连贯的风格。参数是一个映射到数字的特定字体名称。它对应于 OpenType 值 cvXY，例如 cv02。swash()：启用 swash 字形。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 swsh 和 cswh，例如 swsh 2 和 cswh 2。ornaments()：启用诸如 fleurons 和其他丁字形的装饰物。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 ornm，例如 ornm 2。annotation()：启用注解，如圈出的数字或倒置的字符。该参数是一个映射到数字的字体特定名称。它对应于 OpenType 值 nalt，例如 nalt 2。

缓动函数

Easing Functions

-

cubic-bezier():定义三次贝塞尔曲线的缓动函数。steps():在过渡中迭代若干次定格，每次定格停留相同的时间。

动画函数

Animation Functions

-

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

以上为CSS属性值函数列表，每个函数的具体用法和示例，将在今后的文章中介绍。

欢迎订阅、收藏、点赞和转发！

系列文章

CSS属性值函数（2）calc()数值计算