出处：掘金

原作者：ErpanOmer

CSS 中的函数并非传统意义上的编程函数，而是一些用于计算、颜色生成、路径控制、动态调整值等的表达结构。合理运用这些函数，可以极大地增强样式的灵活性和响应性

本文将从功能分类出发，系统梳理 CSS 所有主流函数及其用法

颜色相关函数

rgb() / rgba()

用于生成红绿蓝三原色混合的颜色

color: rgb(255, 0, 0);        /* 红色 */
color: rgba(0, 0, 255, 0.5);  /* 半透明蓝色 */

hsl() / hsla()

HSL 表示色相（Hue）、饱和度（Saturation）、亮度（Lightness）

color: hsl(120, 100%, 50%);         /* 纯绿 */
color: hsla(120, 100%, 50%, 0.3);   /* 30% 透明的绿 */

color-mix()

将两种颜色按比例混合，仅现代浏览器支持（Chrome 111+）

color: color-mix(in srgb, red 40%, blue 60%);

尺寸与计算函数

calc()

允许在 CSS 中进行基本运算

width: calc(100% - 20px);
padding: calc(1rem + 10px);

min() / max() / clamp()

用于设置动态的最小值、最大值或限制值范围

font-size: min(3vw, 20px);
width: max(300px, 50%);
font-size: clamp(14px, 2vw, 24px);

clamp()

动画相关函数

cubic-bezier()

自定义缓动曲线，控制动画速度

transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

steps()

定义帧动画步进数

animation-timing-function: steps(5, end);

资源路径函数

url()

加载外部资源如图片、字体等

background-image: url('/images/banner.jpg');
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2');
}

变换函数

rotate() / scale() / translate() 等

在 transform 属性中使用，实现二维或三维变换

transform: rotate(30deg) scale(1.5) translateX(10px);

matrix() / matrix3d()

低级变换控制函数，控制矩阵变换

transform: matrix(1, 0, 0, 1, 100, 100);

裁剪函数（Clip Path）

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%);

变量和属性提取

var()

调用 CSS 变量

:root {
  --main-color: #ff6600;
}
div {
  color: var(--main-color);
}

attr()（实验性）

从 HTML 属性中提取内容，常用于伪元素

[data-label]:before {
  content: attr(data-label);
}

滤镜函数

图像滤镜函数：blur()、brightness()、contrast() 等

用于图像视觉效果调整

filter: blur(4px) brightness(1.2);

安全区域与系统变量函数

env() / constant()

用于读取设备的环境变量，常见于 iPhone 刘海屏

padding-top: env(safe-area-inset-top);

constant() 是旧版本写法，不推荐

非主流函数（了解即可）

element()（仅 Firefox 支持）

将 HTML 元素作为图像资源

background-image: element(#myDiv);