CSS中常使用的函数

除了 clamp()，CSS 还有很多功能强大的函数。以下是分类介绍：

一、尺寸与计算相关函数

1. min() - 取最小值

css

css 复制代码

.element {
  width: min(50%, 500px); /* 取50%和500px中的较小值 */
  padding: min(2vw, 20px);
}

2. max() - 取最大值

css

css 复制代码

.element {
  width: max(300px, 50%); /* 至少300px */
  font-size: max(1rem, 12px);
}

3. calc() - 数学计算

css

css 复制代码

/* 基本计算 */
.element {
  width: calc(100% - 2rem);
  height: calc(50vh + 100px);
}

/* 复杂计算 */
.grid-item {
  width: calc((100% - 3 * 20px) / 4); /* 4列网格 */
}

/* 嵌套计算 */
.element {
  font-size: calc(var(--base-size) * 1.2);
}

4. fit-content() - 内容适应

css

css 复制代码

.container {
  width: fit-content(500px); /* 不超过500px的内容宽度 */
  margin: 0 auto;
}

/* 表格列自适应 */
td {
  width: fit-content;
}

二、clamp() 函数详解

语法

arduino 复制代码

clamp(min, preferred, max)

min：最小值（下限）
preferred：首选值（通常使用相对单位）
max：最大值（上限）

工作原理

css 复制代码

/* 实际值会在这个范围内：min ≤ preferred ≤ max */
width: clamp(200px, 50%, 800px);
/* 意思是：宽度最小200px，首选50%视口宽度，最大800px */

实际应用示例

1. 响应式字体大小

css 复制代码

/* 字体在16px-24px之间，首选3vw（视口宽度的3%） */
.font-responsive {
  font-size: clamp(16px, 3vw, 24px);
}

/* 标题响应式 */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

2. 响应式容器宽度

css 复制代码

.container {
  width: clamp(300px, 80%, 1200px);
  margin: 0 auto;
}

/* 图片自适应 */
img {
  width: clamp(150px, 50%, 600px);
  height: auto;
}

三、渐变与图像函数

1. linear-gradient() - 线性渐变

css

css 复制代码

/* 基本渐变 */
.gradient-1 {
  background: linear-gradient(45deg, red, blue);
}

/* 多色渐变 */
.gradient-2 {
  background: linear-gradient(
    to right,
    red 0%,
    orange 25%,
    yellow 50%,
    green 75%,
    blue 100%
  );
}

/* 透明渐变 */
.gradient-3 {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0,0,0,0.5)
  );
}

2. radial-gradient() - 径向渐变

css

css 复制代码

/* 圆形渐变 */
.radial-1 {
  background: radial-gradient(circle, red, yellow, green);
}

/* 椭圆渐变 */
.radial-2 {
  background: radial-gradient(
    ellipse at center,
    red 0%,
    blue 100%
  );
}

/* 重复径向渐变 */
.radial-3 {
  background: repeating-radial-gradient(
    circle,
    red,
    red 10px,
    blue 10px,
    blue 20px
  );
}

3. conic-gradient() - 锥形渐变

css

css 复制代码

/* 色轮 */
.conic-1 {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
}

/* 饼图效果 */
.pie-chart {
  background: conic-gradient(
    red 0% 33%,
    yellow 33% 66%,
    blue 66% 100%
  );
}

4. image-set() - 响应式图像

css

css 复制代码

/* 根据分辨率加载不同图片 */
.responsive-bg {
  background-image: image-set(
    "image-low.jpg" 1x,
    "image-high.jpg" 2x,
    "image-ultra.jpg" 3x
  );
}

/* 格式支持 */
.optimized-bg {
  background-image: image-set(
    "image.avif" type("image/avif"),
    "image.webp" type("image/webp"),
    "image.jpg" type("image/jpeg")
  );
}

四、变换与动画函数

1. translate() / translateX() / translateY()

css

css 复制代码

.element {
  transform: translate(50px, 100px);
  transform: translateX(100px);
  transform: translateY(50%);
}

/* 3D变换 */
.element-3d {
  transform: translate3d(100px, 50px, 20px);
}

2. scale() / scaleX() / scaleY()

css

css 复制代码

/* 缩放 */
.element {
  transform: scale(1.5);          /* 整体放大1.5倍 */
  transform: scale(1.2, 0.8);     /* 宽放大，高缩小 */
  transform: scaleX(2);           /* 水平放大2倍 */
}

3. rotate()

css

css 复制代码

/* 旋转 */
.element {
  transform: rotate(45deg);      /* 45度旋转 */
  transform: rotate(1turn);      /* 360度旋转 */
  transform: rotate3d(1, 1, 1, 45deg); /* 3D旋转 */
}

4. matrix() / matrix3d()

css

css 复制代码

/* 矩阵变换（组合所有变换） */
.complex-transform {
  transform: matrix(1, 0, 0, 1, 100, 50);
  /* 等同于：translate(100px, 50px) */
}

5. cubic-bezier() - 贝塞尔曲线

css

css 复制代码

/* 自定义缓动函数 */
.animation {
  animation: move 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 预设曲线 */
.ease-in-out { transition-timing-function: ease-in-out; }
.custom-ease { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

6. steps() - 步进动画

css

css 复制代码

/* 逐帧动画 */
.sprite-animation {
  animation: walk 1s steps(8) infinite;
}

/* 打字机效果 */
.typewriter {
  animation: typing 3s steps(40) forwards;
}

五、滤镜效果函数

1. blur() - 模糊

css

css 复制代码

.blur-effect {
  filter: blur(5px);
  backdrop-filter: blur(10px); /* 背景模糊 */
}

2. brightness() - 亮度

css

css 复制代码

.image {
  filter: brightness(150%); /* 变亮 */
  filter: brightness(50%);  /* 变暗 */
}

3. contrast() - 对比度

css

css 复制代码

.photo {
  filter: contrast(200%); /* 增加对比度 */
}

4. drop-shadow() - 阴影

css

css 复制代码

/* 比 box-shadow 更符合元素形状 */
.icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

/* 多重阴影 */
.text {
  filter: 
    drop-shadow(1px 1px 0 white)
    drop-shadow(-1px -1px 0 white);
}

5. 组合滤镜

css

css 复制代码

.instagram-filter {
  filter: 
    brightness(1.2)
    contrast(1.1)
    saturate(1.3)
    sepia(0.1);
}

六、布局与网格函数

1. minmax() - 网格尺寸范围

css

css 复制代码

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 复杂的网格布局 */
.layout {
  grid-template-columns: 
    minmax(200px, 300px)
    minmax(auto, 1fr)
    minmax(150px, 200px);
}

2. repeat() - 重复模式

css

css 复制代码

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 重复3次 */
  grid-template-rows: repeat(auto-fill, minmax(100px, auto));
}

/* 命名网格线 */
.complex-grid {
  grid-template-columns: 
    [sidebar-start] 250px [sidebar-end content-start] 
    repeat(2, [col] 1fr)
    [content-end];
}

3. fit-content() - 网格尺寸

css

css 复制代码

.grid-item {
  grid-column: 1 / fit-content(500px);
}

七、其他实用函数

1. var() - CSS 变量

css

css 复制代码

:root {
  --primary-color: #3498db;
  --spacing: 1rem;
  --font-family: 'Roboto', sans-serif;
}

.element {
  color: var(--primary-color);
  padding: var(--spacing);
  font-family: var(--font-family);
  
  /* 默认值 */
  margin: var(--custom-margin, 10px);
}

2. attr() - 属性值

css

css 复制代码

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

/* 配合计数器 */
.item::before {
  content: attr(data-index);
}

/* 动态样式 */
.progress {
  width: attr(data-progress percent);
}

3. counter() / counters() - 计数器

css

css 复制代码

/* 自动编号 */
ol {
  counter-reset: section;
}

li::before {
  counter-increment: section;
  content: counter(section) ". ";
}

/* 嵌套计数器 */
ol ol {
  counter-reset: subsection;
}

li li::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

4. url() - 资源路径

css

css 复制代码

/* 图片 */
.background {
  background-image: url("image.jpg");
  background-image: url("data:image/svg+xml,..."); /* 内联SVG */
}

/* 字体 */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
}

/* 光标 */
.custom-cursor {
  cursor: url('cursor.png'), auto;
}

5. env() - 环境变量

css

css 复制代码

/* 安全区域（适配刘海屏） */
.safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 视口单位 */
.full-height {
  height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

八、函数组合使用示例

复杂响应式设计

css

css 复制代码

:root {
  --min-width: 320px;
  --max-width: 1200px;
  --fluid-scale: min(max(var(--min-width), 100vw), var(--max-width));
}

.container {
  /* 组合多个函数 */
  width: clamp(
    var(--min-width),
    calc(100vw - 2 * var(--spacing)),
    var(--max-width)
  );
  
  padding: var(--spacing);
  
  /* 响应式字体 */
  font-size: clamp(
    1rem,
    calc(0.5rem + 1vw),
    1.5rem
  );
  
  /* 响应式渐变背景 */
  background: linear-gradient(
    to bottom right,
    hsl(calc(220 + var(--hue-adjust)) 70% 50% / 0.9),
    hsl(calc(280 + var(--hue-adjust)) 60% 40% / 0.8)
  );
  
  /* 动态阴影 */
  box-shadow: 
    0 calc(2px + 0.1vw) calc(4px + 0.2vw) 
    color-mix(in srgb, currentColor 20%, transparent);
}

现代按钮组件

css

css 复制代码

.button {
  /* 尺寸响应式 */
  padding: clamp(0.5rem, 2vw, 1rem) clamp(1rem, 4vw, 2rem);
  
  /* 颜色动态 */
  background: color-mix(
    in srgb, 
    var(--primary-color) 
    calc(var(--hover, 0) * 20%), 
    black
  );
  
  /* 交互效果 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 悬停状态 */
  &:hover {
    --hover: 1;
    transform: translateY(calc(-1 * var(--hover, 0) * 2px));
    filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  }
}

十、浏览器支持与回退方案

渐进增强策略

css

css 复制代码

/* 1. 基础样式 */
.element {
  width: 90%;
  max-width: 800px;
  min-width: 300px;
}

/* 2. 使用 @supports 检测支持 */
@supports (width: clamp(300px, 90%, 800px)) {
  .element {
    width: clamp(300px, 90%, 800px);
  }
}

/* 3. 使用 CSS 变量提供回退 */
:root {
  --fluid-width: 90%;
}

@supports (width: clamp(300px, var(--fluid-width), 800px)) {
  .element {
    --fluid-width: min(max(300px, 90%), 800px);
    width: var(--fluid-width);
  }
}

总结对比表

函数类别	核心函数	主要用途	兼容性
尺寸计算	clamp(), min(), max(), calc()	响应式尺寸	优秀
渐变背景	linear-gradient(), radial-gradient()	背景效果	优秀
变换动画	translate(), rotate(), cubic-bezier()	动画效果	优秀
滤镜效果	blur(), drop-shadow()	视觉效果	良好
网格布局	minmax(), repeat()	布局系统	优秀
变量函数	var(), attr(), counter()	动态内容	优秀

现代 CSS 函数大大增强了样式表达能力，减少了 JavaScript 的依赖，是构建现代响应式 Web 应用的重要工具。