🎨
CSS 函数速查
CSS 常用函数 calc/clamp/var/gradient 等速查。
本地处理 · 不上传
加载工具中…
相关：css · 函数 · calc · clamp · 前端
CSS 函数速查列出 calc、clamp、min/max、var、url 等函数的用法。现代 CSS 的表达能力很大程度上来自这些函数。
使用步骤
- 按计算、颜色、渐变等用途找到函数
- 注意 calc 中运算符两侧必须留空格
- 确认取值单位是否可以混用
- 在浏览器开发者工具里看计算后的最终值
使用场景
- 查找函数的正确语法
- 理解各函数的适用场景
- 编写响应式的尺寸计算
- 使用 CSS 变量
小贴士
- calc 中的运算符两侧必须有空格，`calc(100%-20px)` 会解析失败，这是最常见的书写错误。
- clamp(最小值, 首选值, 最大值) 能一行实现流体尺寸，替代多个媒体查询断点。
- var 函数支持第二个参数作为回退值，变量未定义时使用它，能避免样式完全失效。
常见问题
calc 为什么不生效？
最常见的原因是运算符两侧没有空格。`calc(100% - 20px)` 正确，`calc(100%-20px)` 会被解析为无效值。这个规则是为了避免与负号产生歧义。
clamp 怎么用？
三个参数依次是最小值、首选值、最大值。首选值通常写成含 vw 的表达式，这样尺寸会随视口变化但被限制在上下限之间，一行代码替代多个断点。
CSS 变量和预处理器变量有什么区别？
CSS 变量在运行时生效，可以被 JavaScript 修改、能随媒体查询变化、遵循层叠继承；预处理器变量在编译时就被替换成固定值。做主题切换必须用 CSS 变量。
CSS 函数速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 函数速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。