CSS 与布局 / CSS 函数 · 值是「算」出来的 待审核 9 页

CSS 函数 · 值是「算」出来的

CSS 属性值远不止 20px、red 这样的字面量 —— 一大票值长成 name(参数) 的样子: calc(100% - 80px)、clamp(16px, 4vw, 40px)、oklch(0.7 0.15 50)、linear-gradient(red, blue)……这种写法叫 functional notation (函数式记法): 函数名 + 括号里的参数, 浏览器拿参数算出最终的值。它们不是零散的语法糖, MDN 把全部 value function 归成了 14 类 115 个的一张完整地图。

本系列先用一页全景图认全这 14 类 (用 CSS.supports 实时检测当前浏览器支持哪些); 再深入其中最常用也最新的 math functions: calc() 与 min/max/clamp 的混单位算术、round()/mod()/rem() 的取整策略与负数行为、把任意值线性映射到 0–1 的 progress()、为 CSS 带来原生随机数的 random()、以及 tan(atan2()) —— 用一对三角函数把带单位的长度「类型转换」为纯 number。全程滑块实时重算 + 真实 getComputedStyle 读数。最后把视角反过来: @function at-rule 让你自己定义带参数 / 类型 / 默认值的 CSS 函数。

前置: random() 的「共享语义」涉及 var() 是文本代换这一机制, 需要时可参考 custom-properties 系列。

全景 · 14 类 115 个

CSS 函数全景

CSS 里凡是写成 name(参数) 的值都是 functional notation。它们没有副作用、不能自定义，每一个都是浏览器内置的值加工器。

 算术与比较 · calc / clamp

calc() 混单位算术与 clamp() 流体值

calc() 里的百分比要到布局阶段才有确定值；min()、max() 与 clamp() 则把一个值夹进给定区间。

 取整与求余 · round / mod / rem

round() 的四种取整策略，以及 mod 与 rem 的区别

round()、mod() 与 rem() 三个阶跃函数。取整策略四选一，两个求余函数在异号时结果符号各自跟谁是它们的分界。

 映射 · progress()

progress(): 把任意值线性映射到 0–1

progress(值, 起, 止) 把一个量归一化到 0 与 1 之间并钳住两端。它真正的价值是允许长度除长度，这是 calc() 表达不出来的。

 随机 · random()

random(): CSS 原生掷骰子

random(min, max, step?) 为 CSS 带来原生随机数。要厘清的是随机值由谁共享：默认每处各取一次，另有跨属性与跨元素两个维度可控。

 类型转换 · tan(atan2())

tan(atan2()): 把长度转换成 number

一对反正切与正切构成除法器，把带单位的量约成纯数。视口宽度、容器宽度与时间量都能这样读成数字。

 相对色 · alpha()

alpha(): 只改透明度的颜色函数

relative color 把 origin 的透明度暴露成一个可参与计算的 alpha 关键字，于是替换与缩放 alpha 都能在样式层完成。

 自定义函数 · @function

@function 与自定义函数

@function 让 author 自己定义带参数、类型约束、默认值与返回类型的可复用函数。它不是文本代换，而是真正的求值。

 链接参数 · param()

param(): 把 CSS 变量传进被引用的图片里

param() 不计算，而是在引用图片处往那张图塞进一个具名参数，图内用 env() 接出来，为隔离的外部 SVG 开一扇单向传参口。

🔗 相关链接

📐 规范 / 文档

各页的主要来源放在对应子页末尾的「相关链接」里。下面是贯穿全系列的总参考: