Css 简明教程
CSS - Value Functions
CSS value functions 允许您动态生成 CSS 属性值。这些函数接受参数并返回一个值，该值可以代替静态值使用。
Syntax
selector {
property: function([argument]? [, argument]!);
}-
函数名称首先出现在值语法中，其后是打开圆括号 ( 。接下来是参数，闭圆括号 ) 完成函数。
-
函数接受多个参数，它们的格式与 CSS 属性值相同。
-
空格虽然是可选的，但允许在括号内使用。多个参数在某些功能化表示法中以逗号分隔，而在其他功能化表示法中以空格分隔。
Transform Functions
CSS 数据类型称为 <transform-function> 代表视觉转换，并用作 transform 属性中的值。
Translate Functions
下表列出了转换函数：
Functions |
Description |
Translates an element horizontally. |
|
Translates an element veritcally. |
|
沿着 z 轴转换元素。 |
|
在 2D 平面中转换元素。 |
|
在 3D 空间中转换元素。 |
Rotation Functions
下表列出了旋转函数：
Functions |
Description |
围绕水平轴旋转元素。 |
|
围绕垂直轴旋转元素。 |
|
围绕 z 轴旋转元素。 |
|
围绕在 2D 平面上的一个固定点旋转元素。 |
|
围绕 3D 空间中的一个固定轴旋转元素。 |
Scaling Functions
下表列出了缩放函数：
Functions |
Description |
水平地放大或缩小一个元素。 |
|
垂直地放大或缩小一个元素。 |
|
沿 z 轴向上或向下缩放元素。 |
|
在 2D 平面上向上或向下缩放元素。 |
|
在 3D 空间中向上或向下缩放元素。 |
Math Functions
数学表达式可以在 CSS 中使用数学函数表示数值。
Filter Functions
CSS 数据类型 <filter-function> 表示一种能够改变输入图像外观的图形效果。它在 filter 和 backdrop-filter 属性中使用。
Function |
Description |
增加图像高斯模糊。 |
|
使图像变亮或变暗。 |
|
增加或减少图像对比度。 |
|
在图像后面填充阴影。 |
|
将图像转换为灰度。 |
|
改变图像的整体色相。 |
|
反转图像的颜色。 |
|
增加图像的透明度。 |
|
改变图像的整体饱和度。 |
|
增加图像的褐色色调。 |
Color Functions
CSS 数据类型 <color> 定义了表示颜色不同方法。
Function |
Description |
根据其红色、绿色、蓝色和透明度（alpha）组件指定给定颜色。 |
|
根据其色相、饱和度、明度和透明度（alpha）组件指定给定颜色。 |
|
根据其色相、白度和黑度组件指定给定颜色。 |
|
根据其色相、色度和明度组件指定给定颜色。 |
|
根据其色相、色度、明度和透明度（alpha）组件指定给定颜色。 |
|
根据其明度，lab 颜色空间中的 a 轴距离和 b 轴距离指定给定颜色。 |
|
根据其明度，lab 颜色空间中的 a 轴距离，b 轴距离和透明度（alpha）指定给定颜色。 |
|
指定特定、显式的颜色空间，而不是隐式的 sRGB 颜色空间。 |
|
在给定颜色空间中，按给定量混合两个颜色值。 |
Image Functions
CSS 数据类型 <image> 提供图像或渐变的图形表示形式。
Gradient Functions
下表列出了渐变函数：
Function |
Description |
线性渐变沿假想线逐步过渡颜色。 |
|
径向渐变逐步从中心点（原点）过渡颜色。 |
|
圆锥渐变逐步围绕圆圈过渡颜色。 |
|
类似于 linear-gradient() 并采用相同的参数，但它在各个方向重复颜色档位，从而覆盖其整个容器。 |
|
类似于 radial-gradient() 并采用相同参数，但它在各个方向重复颜色档位，从而覆盖其整个容器。 |
|
类似于 conic-gradient() 并采用相同参数，但它在各个方向重复颜色档位，从而覆盖其整个容器。 |
Counter Functions
理论上 CSS 计数器函数可以在一个 <string> 可用的任何地方使用，然而他们通常与内容属性一起使用。
Function |
Description |
如果有一个计数器，返还一个字符串代表已命名的计数器的当前值。 |
|
启用嵌套计数器，返回一个连接字符串代表已命名的计数器的当前值（如果有）。 |
Shape Functions
CSS 数据类型 <basic-shape> 表示一个视觉形状，并用于 clip-path 、 offset-path 和 shape-outside 这样的属性。
Function |
Description |
Defines a circle shape. |
|
Defines an ellipse shape. |
|
定义一个内嵌矩形形状。 |
|
Defines a polygon shape. |
|
接受一个 SVG 路径字符串，以启用绘制一个形状。 |
Reference Functions
为了引用一个在别处定义的值，以下函数被用作属性值。
Function |
Description |
使用 HTML 元素上定义的属性。 |
|
使用用户代理，定义为环境变量。 |
|
使用指定网址的一个文件。 |
|
使用自定义属性值，代替另一个属性值的一部分。 |
Grid Functions
以下函数用于定义一个 CSS 网格。
Function |
Description |
根据公式 min(maximum size, max(minimum size, argument)) ，将一个给定尺寸夹紧到一个可用尺寸。 |
|
定义一个尺寸范围，大于或等于最小尺寸，小于或等于最大尺寸。 |
|
表示一个重复片段的轨道列表，允许有大量展现重复模式的行或列。 |
Font Functions
替换字体字形的使用由 CSS 字体函数与 font-variant-alternates 属性组合管理。
Function |
Description |
这个函数使用与一个编号关联的字体特定名称，为特定字符激活样式替换。 |
|
这个函数为字符组激活风格化的选择。参数是与一个数字关联的特定字体名称，例如 ss02 。 |
|
这个函数允许不同的样式对各个字符进行变化，不像 styleset() ，它为一个字符集创建连贯的字形的。 |
|
这个函数用与一个数字关联的特定字体名称激活装饰字形，比如 swsh 2 和 cswh 2 。 |
|
这个函数用与一个数字关联的特定字体名称激活装饰物，例如花饰和装饰字形，比如 ornm 2 。 |
|
这个函数允许注释，比如圆圈数字或者倒置字符，用与一个数字关联的特定字体名称，比如 nalt 2 。 |