CSS 中的函数并非传统意义上的编程函数，而是一些用于 计算、颜色生成、路径控制、动态调整值等 的表达结构。合理运用这些函数，可以极大地增强样式的灵活性和响应性。
本文将从功能分类出发，系统梳理 CSS 所有主流函数及其用法。
🎨 颜色相关函数
1. rgb() / rgba()
用于生成红绿蓝三原色混合的颜色。
color: rgb(255, 0, 0); /* 红色 */
color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
2. hsl() / hsla()
HSL 表示色相（Hue）、饱和度（Saturation）、亮度（Lightness）。
color: hsl(120, 100%, 50%); /* 纯绿 */
color: hsla(120, 100%, 50%, 0.3); /* 30% 透明的绿 */
3. color-mix()
将两种颜色按比例混合，仅现代浏览器支持（Chrome 111+）。
color: color-mix(in srgb, red 40%, blue 60%);
📏 尺寸与计算函数
4. calc()
允许在 CSS 中进行基本运算。
width: calc(100% - 20px);
padding: calc(1rem + 10px);
5. min() / max() / clamp()
用于设置动态的最小值、最大值或限制值范围。
font-size: min(3vw, 20px);
width: max(300px, 50%);
font-size: clamp(14px, 2vw, 24px);
🎬 动画相关函数
6. cubic-bezier()
自定义缓动曲线，控制动画速度。
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
7. steps()
定义帧动画步进数。
animation-timing-function: steps(5, end);
📦 资源路径函数
8. url()
加载外部资源如图片、字体等。
background-image: url('/images/banner.jpg');
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2');
}
🌀 变换函数
9. rotate() / scale() / translate() 等
在 transform 属性中使用，实现二维或三维变换。
transform: rotate(30deg) scale(1.5) translateX(10px);
10. matrix() / matrix3d()
低级变换控制函数，控制矩阵变换。
transform: matrix(1, 0, 0, 1, 100, 100);
✂️ 裁剪函数（Clip Path）
11. circle() / ellipse() / polygon()
用于裁剪元素形状。
clip-path: circle(50% at center);
clip-path: ellipse(60% 40% at center);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
🧬 变量和属性提取
12. var()
调用 CSS 变量。
:root {
--main-color: #ff6600;
}
div {
color: var(--main-color);
}
13. attr()（实验性）
从 HTML 属性中提取内容，常用于伪元素。
[data-label]:before {
content: attr(data-label);
}
🔧 滤镜函数
14. 图像滤镜函数：blur()、brightness()、contrast() 等
用于图像视觉效果调整。
filter: blur(4px) brightness(1.2);
📱 安全区域与系统变量函数
15. env() / constant()
用于读取设备的环境变量，常见于 iPhone 刘海屏。
padding-top: env(safe-area-inset-top);
constant()是旧版本写法，不推荐。
🧪 非主流函数（了解即可）
16. element()（仅 Firefox 支持）
将 HTML 元素作为图像资源。
background-image: element(#myDiv);
✅ 小结：一图总览 CSS 函数
| 分类 | 函数示例 | 用途 |
|---|---|---|
| 颜色 | rgb() hsl() color-mix() | 颜色混合与透明控制 |
| 尺寸计算 | calc() min() max() clamp() | 响应式计算与动态布局 |
| 动画 | cubic-bezier() steps() | 控制动画速率和帧 |
| 路径资源 | url() | 加载图片、字体等资源 |
| 变换 | rotate() matrix() | 实现旋转、缩放、位移等变形 |
| 裁剪 | clip-path: circle() 等 | 裁剪元素形状 |
| 变量调用 | var() attr() | 使用变量、提取 HTML 属性 |
| 滤镜 | blur() contrast() | 图像视觉效果 |
| 环境适配 | env() | 设备安全区域适配 |
| 特殊函数 | element() | 使用 DOM 元素当作图像 |
如果你正在编写组件库、实现响应式布局或追求高级动效，CSS 函数将是你不可缺少的利器。
