CSS函数怎么使用？CSS常用函数使用方法教程

CSS函数是CSS规范中提供的可接收参数的功能表达式，能够完成数值计算、元素状态控制、颜色处理等复杂样式逻辑，是现代CSS开发中不可或缺的工具。合理运用CSS函数可以让样式代码更简洁、适配性更强，减少冗余的硬编码数值。

CSS函数的通用使用规则

所有CSS函数都遵循统一的语法结构：函数名(参数1,参数2,...)，参数之间用逗号分隔，部分函数支持可变数量参数。使用时需要注意以下几点：

• 函数名不区分大小写，但建议统一使用小写形式，符合行业通用规范
• 参数类型需要根据函数要求填写，比如数值类函数需要传入合法的长度、数值单位
• 函数可以嵌套使用，比如calc(100% - var(--sidebar-width))

常用CSS函数详解

1. calc() 动态计算函数

calc()函数支持在声明CSS属性值时执行加减乘除运算，能够混合不同单位的数值，常用于响应式布局中的尺寸计算。

语法：calc(数学表达式)，支持+、-、*、/四种运算符，运算符前后需要保留空格。

/* 计算容器宽度，减去两侧内边距 */
.container {
  width: calc(100% - 40px);
  padding: 0 20px;
}

/* 混合不同单位计算高度 */
.sidebar {
  height: calc(100vh - 60px);
}

/* 嵌套使用calc和var函数 */
.main-content {
  width: calc(100% - var(--sidebar-width, 200px));
}

2. var() 自定义属性引用函数

var()函数用于引用CSS自定义属性（也就是CSS变量），实现样式值的复用，方便全局修改主题样式。

语法：var(--自定义属性名, 备用值)，备用值是当自定义属性未定义时使用的默认值。

/* 定义全局自定义属性 */
:root {
  --primary-color: #1890ff;
  --font-size-base: 14px;
  --border-radius: 4px;
}

/* 引用自定义属性 */
.btn-primary {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
  border-radius: var(--border-radius);
}

/* 使用备用值，当--custom-color未定义时使用#666 */
.text-secondary {
  color: var(--custom-color, #666);
}

3. transform 变换函数

transform属性配合对应的变换函数，可以实现元素的平移、旋转、缩放、倾斜等效果，所有变换函数都作为transform的属性值使用。

常用变换函数包括：

• translate(x,y)：元素平移，支持translateX、translateY单独设置
• rotate(angle)：元素旋转，单位可以是deg（度）、rad（弧度）
• scale(x,y)：元素缩放，支持scaleX、scaleY单独设置
• skew(x-angle,y-angle)：元素倾斜，单位同rotate

/* 元素平移并旋转 */
.box {
  transform: translate(20px, 10px) rotate(45deg);
}

/* 鼠标悬浮时放大1.2倍 */
.card:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

/* 沿着X轴倾斜30度 */
.slant {
  transform: skewX(30deg);
}

4. cubic-bezier() 贝塞尔曲线函数

cubic-bezier()函数用于定义CSS过渡和动画的时间函数，控制动画的速度变化节奏，替代默认的ease、linear等预设值。

语法：cubic-bezier(x1,y1,x2,y2)，四个参数分别是贝塞尔曲线的两个控制点的坐标，取值范围是0到1之间。

/* 自定义缓动效果，先慢后快再慢 */
.custom-transition {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 动画使用自定义贝塞尔曲线 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-element {
  animation: slideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

CSS函数使用注意事项

• calc()函数中乘除法运算符前后可以不加空格，但加减必须加空格，否则会解析错误
• var()引用的自定义属性需要先声明再使用，作用域遵循CSS的层叠规则
• transform的多个变换函数同时使用时，顺序会影响最终效果，因为变换是基于前一个变换后的状态执行
• 部分旧版本浏览器可能对某些CSS函数支持不完善，生产环境可以根据需要添加浏览器前缀

常见问题解答

CSS函数可以传入其他函数的返回值吗？

可以，只要内层函数的返回值符合外层函数的参数要求即可，比如之前示例中的calc嵌套var就是典型场景。

为什么我的calc函数没有生效？

最常见的原因是运算符前后没有加空格，比如写成calc(100%-20px)就会解析失败，需要改成calc(100% - 20px)。

自定义属性可以在calc中使用吗？

可以，自定义属性的值如果是合法的数值单位，就可以直接在calc中引用，比如calc(100vh - var(--header-height))。

CSS函数transformcalcvarcubic-bezier修改时间：2026-07-02 04:15:36