介绍

“CSS function” 是指 CSS 中内置的函数（如 calc()、var()、rgb()、url() 等），它们常用于动态计算、颜色处理、单位换算、渐变、形变、过滤、选择器控制等。

下面我帮你系统地 汇总和分类所有常见 CSS 函数，让你能快速掌握重点和面试高频点。

---

一、数值与单位计算函数（计算类）

1️⃣ calc()

• 作用：允许在 CSS 中进行动态计算。

• 常用语法：

  width: 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()

• 颜色定义（红、绿、蓝、透明度）

  color: rgba(255, 0, 0, 0.8);
  

2️⃣ hsl() / hsla()

• 按色相（Hue）、饱和度（Saturation）、亮度（Lightness）定义颜色。

  color: hsl(120, 50%, 50%);
  

3️⃣ color-mix()

• 混合两种颜色（现代浏览器支持）

  color: 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);

✅ 这些函数可以组合使用：

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

---