CSS 函数是用来对属性值进行计算、转换或处理的一种方法。在前端开发中，我们经常会使用各种函数来实现样式的动态变化和效果。本章节将介绍一些常用的 CSS 函数。
1. rgb()
rgb() 函数用来表示颜色的 RGB 值，接受三个参数分别代表红色、绿色和蓝色的取值范围为 0 到 255。例如，rgb(255, 0, 0) 表示红色。
示例代码：
div { background-color: rgb(255, 0, 0); }
2. rgba()
rgba() 函数与 rgb() 函数类似，只是多了一个表示透明度的参数，取值范围为 0 到 1。例如，rgba(255, 0, 0, 0.5) 表示半透明的红色。
示例代码：
div { background-color: rgba(255, 0, 0, 0.5); }
3. hsl()
hsl() 函数用来表示颜色的 HSL 值，接受三个参数分别代表色相、饱和度和亮度。色相取值范围为 0 到 360，饱和度和亮度取值范围为 0% 到 100%。例如，hsl(0, 100%, 50%) 表示红色。
示例代码：
div { background-color: hsl(0, 100%, 50%); }
4. hsla()
hsla() 函数与 hsl() 函数类似，只是多了一个表示透明度的参数，取值范围为 0 到 1。例如，hsla(0, 100%, 50%, 0.5) 表示半透明的红色。
示例代码：
div { background-color: hsla(0, 100%, 50%, 0.5); }
以上就是一些常用的 CSS 函数，通过灵活运用这些函数，可以实现各种炫丽的样式效果。
| 函数 | 描述 | CSS 版本 |
|---|---|---|
| attr() | 返回选择元素的属性值。 | 2 |
| calc() | 允许计算 CSS 的属性值，比如动态计算长度值。 | 3 |
| cubic-bezier() | 定义了一个贝塞尔曲线(Cubic Bezier)。 | 3 |
| conic-gradient() | 定义了一个圆锥渐变。 | 3 |
| counter() | 设置计数器。 | 3 |
| hsl() | 使用色相、饱和度、亮度来定义颜色。 | 3 |
| hsla() | 使用色相、饱和度、亮度、透明度来定义颜色。 | 3 |
| linear-gradient() | 创建一个线性渐变的图像 | 3 |
| max() | 从一个逗号分隔的表达式列表中选择最大的值作为属性的值。 | 3 |
| min() | 从一个逗号分隔的表达式列表中选择最小的值作为属性的值。 | 3 |
| radial-gradient() | 用径向渐变创建图像。 | 3 |
| repeating-linear-gradient() | 用重复的线性渐变创建图像。 | 3 |
| repeating-radial-gradient() | 类似 radial-gradient()，用重复的径向渐变创建图像。 | 3 |
| repeating-conic-gradient() | 重复的圆锥渐变。 | 3 |
| rgb() | 使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。 | 2 |
| rgba() | 使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。 | 3 |
| var() | 用于插入自定义的属性值。 | 3 |
| repeat() | 表示轨道列表的重复片段。 | 3 |
| minmax() | 定义了一个长宽范围的闭区间。 | 3 |
