本教程共 44 篇 · 第 43 篇 · 更新于 2026-07-29 · 约 12 分钟阅读

43. CSS 函数

本节目标：掌握 CSS 中常用的函数，包括 calc()、min()、max()、clamp()、var()、attr()，理解它们的适用场景和区别。

CSS 函数让你用表达式代替固定值，写出的样式更灵活、更智能。

calc()：计算器

calc() 用来做数学运算。加减乘除都支持，单位可以混用：

.sidebar {
  width: 250px;
}

.main {
  /* 主内容区宽度 = 100% - 侧边栏 */
  width: calc(100% - 250px);
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      height: 200px;
    }
    .sidebar {
      width: 250px;
      background: #34495E;
      color: white;
      padding: 20px;
    }
    .main {
      flex: 1;
      width: calc(100% - 250px);
      background: #ECF0F1;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">侧边栏 250px</div>
    <div class="main">主内容 calc(100% - 250px)</div>
  </div>
</body>
</html>

运算规则：

+ 和 - 两边必须有空格
* 和 / 两边可以有空格也可以没有
可以嵌套：calc(100% - calc(50px + 20px))

/* 不同单位混用 */
width: calc(50% + 20px);
height: calc(100vh - 60px);
font-size: calc(14px + 0.5vw);
margin: calc(var(--spacing) * 2);

Note

中 + 和 - 运算符两边必须有空格，否则解析失败。calc(100%-20px) 是错的，calc(100% - 20px) 才对。

min()：取最小值

min() 从多个值中选最小的那个：

/* 宽度取 50% 和 400px 中较小的 */
width: min(50%, 400px);

实际效果：容器宽 1000px 时，50% 是 500px，400px 更小，所以宽度是 400px。容器宽 600px 时，50% 是 300px，300px 更小，所以宽度是 300px。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .responsive {
      width: min(50%, 400px);
      height: 150px;
      background: #3498DB;
      color: white;
      padding: 20px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="responsive">
    宽度 = min(50%, 400px)<br>
    调整窗口大小查看效果
  </div>
</body>
</html>

max()：取最大值

max() 从多个值中选最大的那个：

/* 宽度取 30% 和 200px 中较大的 */
width: max(30%, 200px);

实际效果：容器宽 1000px 时，30% 是 300px，300px 更大，所以宽度是 300px。容器宽 500px 时，30% 是 150px，200px 更大，所以宽度是 200px。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .responsive {
      width: max(30%, 200px);
      height: 150px;
      background: #E74C3C;
      color: white;
      padding: 20px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="responsive">
    宽度 = max(30%, 200px)<br>
    调整窗口大小查看效果
  </div>
</body>
</html>

clamp()：区间限制

clamp() 把值限制在一个区间内。语法：clamp(最小值, 首选值, 最大值)

/* 字体最小 14px，首选 4vw，最大 24px */
font-size: clamp(14px, 4vw, 24px);

效果：

视口很窄时，4vw 小于 14px，取 14px
视口适中时，4vw 在 14px 和 24px 之间，取 4vw
视口很宽时，4vw 大于 24px，取 24px

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1 {
      font-size: clamp(20px, 5vw, 48px);
      text-align: center;
    }
    p {
      font-size: clamp(14px, 2.5vw, 20px);
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>clamp() 响应式字体</h1>
  <p>调整浏览器窗口大小，字体会平滑缩放，但不会小于最小值、超过最大值。</p>
</body>
</html>

Tip

是实现流式响应式设计的神器。一个表达式搞定，不需要媒体查询。特别适合标题字号、间距、容器宽度等。

var()：读取变量

var() 读取 CSS 变量的值，上一章已经详细讲过。这里补充几个要点：

/* 基本用法 */
color: var(--text-color);

/* 带默认值 */
color: var(--text-color, #333);

/* 嵌套默认值 */
color: var(--primary, var(--accent, #3498DB));

var() 可以用在属性值、选择器、媒体查询等位置，但不能作为属性名：

/* 正确 */
color: var(--my-color);
margin: calc(var(--spacing) * 2);

/* 错误 */
var(--property-name): red;

attr()：读取 HTML 属性

attr() 读取 HTML 标签上的属性值，用在 CSS 中：

/* 显示 data-tooltip 属性的内容 */
.tooltip::after {
  content: attr(data-tooltip);
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted #333;
      cursor: help;
    }
    .tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      white-space: nowrap;
      font-size: 14px;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    .tooltip:hover::after {
      opacity: 1;
    }
  </style>
</head>
<body>
  <p>
    把鼠标放在
    <span class="tooltip" data-tooltip="这是提示文字">这里</span>
    查看效果
  </p>
</body>
</html>

attr() 还可以指定类型和单位：

/* 读取 width 属性作为数值 */
width: attr(data-width px, auto);

/* 读取 color 属性 */
color: attr(data-color, inherit);

Note

在 content 属性中支持最好。其他属性类型的支持程度有限，生产环境使用前请测试。

其他常用函数

颜色函数

/* RGB/RGBA */
color: rgb(52, 152, 219);
color: rgba(52, 152, 219, 0.8);

/* HSL/HSLA */
color: hsl(204, 70%, 53%);
color: hsla(204, 70%, 53%, 0.8);

/* 颜色混合 */
color: color-mix(in srgb, red 50%, blue 50%);

过滤与混合

/* 滤镜 */
filter: blur(5px);
filter: brightness(1.2);
filter: grayscale(100%);

/* 混合模式 */
mix-blend-mode: multiply;
background-blend-mode: overlay;

形状与路径

/* 多边形裁剪 */
clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);

/* 圆 */
clip-path: circle(50% at 50% 50%);

/* 椭圆 */
clip-path: ellipse(25% 40% at 50% 50%);

函数对比速查

函数	作用	典型场景
`calc()`	数学运算	宽度计算、混合单位
`min()`	取最小值	限制最大宽度
`max()`	取最大值	限制最小宽度
`clamp()`	区间限制	响应式字体、间距
`var()`	读取变量	主题色、间距系统
`attr()`	读取 HTML 属性	动态内容显示

组合使用

这些函数可以组合使用，威力更大：

/* 响应式容器：最小 300px，首选 80%，最大 1200px */
.container {
  width: clamp(300px, 80%, 1200px);
}

/* 响应式间距：基于变量和 calc() */
.grid {
  gap: calc(var(--spacing) * 2);
  padding: clamp(16px, 3vw, 48px);
}

/* 响应式字号 + 变量 */
h1 {
  font-size: clamp(var(--h1-min), var(--h1-preferred), var(--h1-max));
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --container-max: 1200px;
      --container-min: 280px;
    }
    .container {
      width: clamp(var(--container-min), 90%, var(--container-max));
      margin: 0 auto;
      padding: clamp(16px, 4vw, 48px);
    }
    h1 {
      font-size: clamp(24px, 5vw, 48px);
      margin-bottom: clamp(12px, 2vw, 24px);
    }
    p {
      font-size: clamp(14px, 2vw, 18px);
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS 函数组合</h1>
    <p>这个例子综合使用了 clamp() 和 calc()，实现了完全响应式的排版。不需要任何媒体查询，所有值都在一个合理的区间内平滑过渡。</p>
  </div>
</body>
</html>

现代 CSS 的趋势是”少写媒体查询，多用函数”。calc()、clamp()、min()、max() 配合变量，能覆盖大部分响应式需求。