在 CSS 中，函数允许我们在样式表中执行计算、变换、引用值或生成特定效果，而不仅仅是使用静态的颜色或数值。它们为 CSS 带来了更强大的动态性和灵活性，使得响应式设计、复杂布局和动画效果的实现变得更加简洁和高效。理解和掌握 CSS 函数是成为高级前端开发者的关键一步。

核心思想：CSS 函数是内置的或用户定义的指令，用于在样式表中执行计算、转换、引用值或生成特定效果，从而增加 CSS 的动态性和灵活性。它们可以接受参数，并返回一个 CSS 值，是实现复杂样式和响应式设计的强大工具。

一、CSS 函数的分类

CSS 函数可以大致分为以下几类：

  1. 数学函数 (Mathematical Functions)：用于执行算术运算，如 calc()。
  2. 转换函数 (Transform Functions)：用于对元素进行 2D 或 3D 转换，如 translate(), rotate(), scale()。
  3. 颜色函数 (Color Functions)：用于定义或操作颜色，如 rgb(), hsl(), rgba(), hsla(), color-mix()。
  4. 渐变函数 (Gradient Functions)：用于创建图像渐变，如 linear-gradient(), radial-gradient()。
  5. 图像函数 (Image Functions)：用于引用图像或图像处理，如 url(), image-set()。
  6. 过滤函数 (Filter Functions)：用于对元素应用图形效果，如 blur(), brightness(), grayscale()。
  7. 形状函数 (Shape Functions)：用于定义元素的形状区域，如 inset(), circle(), polygon() (与 clip-path 结合)。
  8. 自定义属性函数 (Custom Property Functions)：用于引用 CSS 变量，如 var()。
  9. 比较函数 (Comparison Functions)：用于在给定值中选择一个值，如 min(), max(), clamp()。
  10. 其他函数：如 attr(), env() 等。

下面我们将详细介绍一些最常用和最重要的 CSS 函数。

二、常用 CSS 函数详解

2.1 数学函数：calc()

  • 用途：允许在 CSS 中执行基本的数学运算（加 +、减 -、乘 *、除 /），可以混合使用不同的单位。
  • 语法：calc(expression)
  • 特性：
    • + 和 - 运算符两侧必须有空格，否则会被解析为负数或正数。
    • * 和 / 运算符两侧可以没有空格。
    • 可以嵌套使用 calc()。
    • 除法运算的除数不能为零。
  • 适用场景：
    • 实现复杂的布局计算，如固定侧边栏宽度，主内容区自适应。
    • 设置元素大小，使其在固定值和百分比之间进行调整。
    • 响应式设计中计算字体大小、边距等。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
.sidebar {
  width: 200px;
}
.main-content {
  /* 视口宽度减去侧边栏宽度 */
  width: calc(100vw - 200px);
}
.box {
  /* 50% 宽度，但最小 200px */
  width: calc(50% - 20px); /* 50% 宽度，并减去 20px */
  height: calc(100px + 2em); /* 混合单位 */
  font-size: calc(1em + 0.5vw); /* 字体随视口缩放 */
}

2.2 转换函数：translate(), rotate(), scale(), skew()

  • 用途：用于 transform 属性，对元素进行 2D 或 3D 空间变换。
  • 语法：
    • translate(tx, ty) / translateX(tx) / translateY(ty) / translateZ(tz) / translate3d(tx, ty, tz)
    • rotate(angle) / rotateX(angle) / rotateY(angle) / rotateZ(angle) / rotate3d(x, y, z, angle)
    • scale(sx, sy) / scaleX(sx) / scaleY(sy) / scaleZ(sz) / scale3d(sx, sy, sz)
    • skew(ax, ay) / skewX(ax) / skewY(ay)
    • matrix(...), matrix3d(...), perspective(value)
  • 特性：不会影响文档流，适用于创建动画、悬停效果等。
  • 适用场景：
    • 元素移动、旋转、缩放、倾斜。
    • 制作 3D 效果、视差滚动。

示例：

1
2
3
4
5
6
7
.animated-box {
  transform: translateX(50px) rotate(45deg) scale(1.2); /* 多个转换函数可以链式调用 */
  transition: transform 0.3s ease-in-out;
}
.animated-box:hover {
  transform: translateX(100px) rotate(90deg) scale(1.5);
}

2.3 颜色函数：rgb(), rgba(), hsl(), hsla(), color-mix()

  • 用途：定义颜色值。rgba() 和 hsla() 包含一个 alpha 通道用于设置透明度。color-mix() 用于混合两种颜色。
  • 语法：
    • rgb(red, green, blue) / rgba(red, green, blue, alpha)
    • hsl(hue, saturation, lightness) / hsla(hue, saturation, lightness, alpha)
    • color-mix(in <colorspace>, <color> <percentage>?, <color> <percentage>?) (较新)
  • 特性：提供了多种定义颜色的方式，hsl 更符合人眼感知，方便调整。alpha 值范围 0-1 或 0%-100%。
  • 适用场景：
    • 设置背景色、文字颜色、边框颜色等。
    • 通过 alpha 实现半透明效果。
    • hsl 方便调整颜色变体 (例如，保持色相不变，只调整饱和度或亮度)。
    • color-mix 方便在 CSS 中动态生成颜色变体或主题色。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.red-text {
  color: rgb(255, 0, 0);
}
.half-transparent-blue {
  background-color: rgba(0, 0, 255, 0.5); /* 50% 透明度蓝色 */
}
.primary-color {
  --hue: 220; /* 定义一个色相变量 */
  background-color: hsl(var(--hue), 70%, 50%); /* 蓝色 */
}
.lighten-primary {
  background-color: hsl(var(--hue), 70%, 80%); /* 浅蓝色 */
}
.mixed-color {
  /* 混合红色和蓝色，在 srgb 空间中，50% 红色和 50% 蓝色 */
  background-color: color-mix(in srgb, red 50%, blue); /* 结果是紫色 */
}

2.4 渐变函数：linear-gradient(), radial-gradient()

  • 用途：作为 background-image 的值，创建线性或径向颜色渐变。
  • 语法：
    • linear-gradient([<direction> | <angle>,] <color-stop>[, <color-stop>]...)
    • radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>[, <color-stop>]...)
  • 特性：可以定义多个颜色停止点，创建复杂的渐变效果。
  • 适用场景：
    • 创建背景、按钮、边框等元素的渐变色。
    • 实现纹理效果。

示例：

1
2
3
4
5
6
.linear-gradient-bg {
  background-image: linear-gradient(to right, red, yellow, green);
}
.radial-gradient-bg {
  background-image: radial-gradient(circle at center, white 0%, blue 100%);
}

2.5 图像函数：url(), image-set()

  • 用途：
    • url()：引用外部资源（图像、字体、背景视频等）。
    • image-set()：根据设备像素比 (DPR) 或分辨率提供不同版本的图像。
  • 语法：
    • url('path/to/image.png')
    • image-set(<image-url> <resolution>[, <image-url> <resolution>]...)
  • 特性：image-set() 是响应式图像的解决方案之一。
  • 适用场景：
    • 设置背景图片、字体图标。
    • 为高分屏设备提供更高质量的图片，优化用户体验和性能。

示例：

1
2
3
4
5
6
7
8
9
10
.background-image {
  background-image: url('../images/bg.png');
}
.responsive-image-background {
  background-image: image-set(
    url('my-image.png') 1x, /* 标准屏幕 */
    url('my-image-2x.png') 2x, /* Retina 屏幕 */
    url('my-image-print.png') 600dpi /* 打印 */
  );
}

2.6 过滤函数：blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow()

  • 用途：用于 filter 属性，对元素应用各种图形效果。
  • 语法：filter: function(value) [function(value)...]
  • 特性：可以通过组合多个滤镜函数来实现复杂效果。
  • 适用场景：
    • 图片处理效果（模糊、黑白、旧照片效果）。
    • 用户界面特效（如毛玻璃效果）。
    • 改变图片颜色。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
.blurred-image {
  filter: blur(5px);
}
.grayscale-image {
  filter: grayscale(100%);
}
.vintage-effect {
  filter: sepia(100%) saturate(200%) brightness(80%);
}
.neon-glow {
  filter: drop-shadow(0 0 5px orange) drop-shadow(0 0 15px orange);
}

2.7 自定义属性函数：var()

  • 用途：引用 CSS 自定义属性（即 CSS 变量）的值。
  • 语法：var(--custom-property-name, fallback-value)
  • 特性：提供了 CSS 的变量机制，极大地增强了 CSS 的可维护性和主题化能力。fallback-value 是可选的，当变量未定义时使用。
  • 适用场景：
    • 定义主题色、字体、间距等全局样式变量。
    • 简化样式修改和维护。
    • 创建动态主题切换。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
:root { /* 定义全局变量 */
  --primary-color: #007bff;
  --spacing-unit: 1rem;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  margin-top: var(--spacing-unit, 16px); /* 如果 --spacing-unit 未定义，则使用 16px */
}
.card {
  border: 1px solid var(--primary-color);
}

2.8 比较函数：min(), max(), clamp() (较新)

  • 用途：
    • min()：从一系列逗号分隔的值中选择最小的值。
    • max()：从一系列逗号分隔的值中选择最大的值。
    • clamp(min, preferred, max)：夹取一个值，确保它不小于 min 且不大于 max，优先使用 preferred 值。
  • 语法：
    • min(value1, value2, ...)
    • max(value1, value2, ...)
    • clamp(min, preferred, max)
  • 特性：提供了在 CSS 中进行条件性尺寸计算的能力，是实现更高级响应式设计的利器。
  • 适用场景：
    • min()/max()：
      • 设置元素的最大或最小宽度/高度（例如，width: max(50%, 300px) 确保宽度至少 300px，但不超过 50%）。
      • 控制字体大小，使其在不同视口下保持在一个合理范围。
    • clamp()：
      • 完美的响应式字体大小控制：font-size: clamp(1rem, 2.5vw, 2.2rem) 表示字体大小最小为 1rem，最大为 2.2rem，优先使用 2.5vw (2.5% 视口宽度)。
      • 响应式布局中的间距、边距等。

示例：

1
2
3
4
5
6
7
8
.responsive-box {
  /* 宽度最大 800px，但最小为 400px，并且不超过视口宽度的 90% */
  width: min(800px, max(400px, 90vw));
}
.responsive-font {
  /* 字体大小最小 16px，最大 24px，但会随着视口宽度的 3% 进行缩放 */
  font-size: clamp(16px, 3vw, 24px);
}

2.9 其他函数

  • attr()：用于获取 HTML 元素的属性值，并在 CSS 中使用。主要用于生成内容 (content 属性)。
  • env()：获取环境变量的值，主要用于适配 iPhone X 等设备的安全区域 (safe area)。
    • padding-top: env(safe-area-inset-top);

三、总结

CSS 函数极大地扩展了 CSS 的表现力和计算能力，将样式定义从静态声明提升到了动态编程的层面。从基本的数学运算 calc() 到强大的转换 transform，从灵活的颜色定义 hsl() 到响应式布局利器 min()/max()/clamp()，这些函数使得开发者能够创建更具交互性、适应性更强、更易维护的 Web 界面。随着 CSS 规范的不断演进，未来还会有更多强大且实用的函数被引入，深入学习和实践这些函数，是构建现代 Web 应用不可或缺的技能。