介绍
“CSS function” 是指 CSS 中内置的函数（如
calc()、var()、rgb()、url()等），它们常用于动态计算、颜色处理、单位换算、渐变、形变、过滤、选择器控制等。
下面我帮你系统地 汇总和分类所有常见 CSS 函数，让你能快速掌握重点和面试高频点。
一、数值与单位计算函数（计算类）
1️⃣ calc()
作用：允许在 CSS 中进行动态计算。
常用语法：
csswidth: calc(100% - 50px); padding: calc(var(--gap) / 2);✅ 支持
+ - * /四则运算✅ 可混合不同单位（如
%、px、rem）
2️⃣ min() / max() / clamp()
CSS 中的动态范围函数，响应式设计神器！
| 函数 | 含义 | 示例 |
|---|---|---|
min(a, b) | 取最小值 | width: min(100%, 600px); |
max(a, b) | 取最大值 | width: max(50%, 300px); |
clamp(min, preferred, max) | 限制范围（推荐值） | font-size: clamp(14px, 2vw, 20px); |
✅ clamp() 是响应式字体和容器尺寸调整的常用技巧。
二、颜色与渐变函数
1️⃣ rgb() / rgba()
颜色定义（红、绿、蓝、透明度）
csscolor: rgba(255, 0, 0, 0.8);
2️⃣ hsl() / hsla()
按色相（Hue）、饱和度（Saturation）、亮度（Lightness）定义颜色。
csscolor: hsl(120, 50%, 50%);
3️⃣ color-mix()
混合两种颜色（现代浏览器支持）
csscolor: color-mix(in srgb, red 30%, blue);
4️⃣ 渐变函数
| 函数 | 描述 | 示例 |
|---|---|---|
linear-gradient() | 线性渐变 | background: linear-gradient(45deg, red, blue); |
radial-gradient() | 径向渐变 | background: radial-gradient(circle, yellow, red); |
conic-gradient() | 锥形渐变 | background: conic-gradient(from 0deg, red, yellow, green); |
repeating-linear-gradient() | 可重复线性渐变 | background: repeating-linear-gradient(90deg, red 0, red 10px, blue 10px, blue 20px); |
三、变形与动画函数（Transform类）
这些函数通常出现在 transform: 属性中，用于二维/三维变换。
| 函数 | 作用 | 示例 |
|---|---|---|
translate(x, y) | 平移 | transform: translate(100px, 50px); |
translateX() / translateY() / translateZ() | 单方向平移 | transform: translateX(20px); |
scale(x, y) | 缩放 | transform: scale(1.2, 1.2); |
rotate(angle) | 旋转 | transform: rotate(45deg); |
skew(x-angle, y-angle) | 倾斜 | transform: skew(10deg, 5deg); |
matrix(a, b, c, d, tx, ty) | 2D 矩阵变换 | transform: matrix(1, 0, 0, 1, 50, 50); |
perspective(n) | 设置透视深度 | transform: perspective(600px) rotateY(30deg); |
✅ 这些函数可以组合使用：
css
transform: translateX(100px) rotate(45deg) scale(1.2);四、滤镜函数（Filter类）
用于图像、背景、元素的视觉特效。
| 函数 | 说明 | 示例 |
|---|---|---|
blur(px) | 模糊 | filter: blur(5px); |
brightness(%) | 亮度 | filter: brightness(120%); |
contrast(%) | 对比度 | filter: contrast(150%); |
grayscale(%) | 灰度 | filter: grayscale(100%); |
hue-rotate(deg) | 色相旋转 | filter: hue-rotate(90deg); |
invert(%) | 反色 | filter: invert(100%); |
saturate(%) | 饱和度 | filter: saturate(200%); |
sepia(%) | 棕褐色 | filter: sepia(80%); |
drop-shadow(x y blur color) | 阴影 | filter: drop-shadow(2px 2px 5px gray); |
五、图像与资源函数
| 函数 | 用途 | 示例 |
|---|---|---|
url() | 引入图片、字体等资源 | background: url('./bg.png'); |
image-set() | 设置不同分辨率图片 | background: image-set(url(img1.png) 1x, url(img2.png) 2x); |
cross-fade() | 图片混合（部分浏览器） | background: cross-fade(url(a.png), url(b.png), 50%); |
六、自定义属性与变量函数
| 函数 | 说明 | 示例 |
|---|---|---|
var(--name, fallback) | 调用自定义变量 | color: var(--main-color, black); |
env() | 系统环境变量（如安全区域） | padding-bottom: env(safe-area-inset-bottom); |
七、字符串与计数函数
| 函数 | 用途 | 示例 |
|---|---|---|
attr() | 获取元素属性值 | content: attr(data-label); |
counter() / counters() | 计数器 | content: counter(item) ". "; |
八、形状与裁剪函数（Shape / Clip-path）
| 函数 | 描述 | 示例 |
|---|---|---|
circle() | 圆形裁剪 | clip-path: circle(50% at 50% 50%); |
ellipse() | 椭圆裁剪 | clip-path: ellipse(40% 60% at 50% 50%); |
polygon() | 多边形裁剪 | clip-path: polygon(0 0, 100% 0, 100% 100%); |
inset() | 内边距裁剪 | clip-path: inset(10% 10% 10% 10%); |
path() | 自定义路径（svg） | clip-path: path('M10 10 H 90 V 90 H 10 Z'); |
九、背景与遮罩函数
| 函数 | 功能 | 示例 |
|---|---|---|
repeating-radial-gradient() | 重复径向渐变 | background: repeating-radial-gradient(circle, red, yellow 10px); |
mask-image() | 遮罩图像 | mask-image: linear-gradient(to right, transparent, black); |
十、时间与步骤函数（动画函数）
| 函数 | 描述 | 示例 | |
|---|---|---|---|
cubic-bezier(x1, y1, x2, y2) | 自定义缓动函数 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| `steps(n, start | end)` | 分步动画 | animation-timing-function: steps(5, end); |
🔍 面试常问总结
| 类型 | 高频函数 | 说明 |
|---|---|---|
| 动态布局 | calc()、clamp()、min() | 响应式计算 |
| 动画优化 | transform()、opacity + cubic-bezier() | 高性能动画 |
| 色彩控制 | rgba()、hsl()、color-mix() | 灵活配色 |
| 滤镜特效 | filter() 系列 | 图像优化 |
| 变量控制 | var()、env() | 主题与适配 |
| 裁剪形状 | clip-path() | 个性化 UI |