函数全景图：你的浏览器认识几个
CSS 里凡是写成 name(参数) 的值都是 functional notation。和 JS 函数不同，它们没有副作用、不能自定义，每一个都是浏览器内置的「值加工器」。下面照
MDN 的分类法 把全部函数摆成一张地图，并用 CSS.supports(property, value) 实时检测: 每枚 chip 一条最小探针，绿 = 当前浏览器认识、红 = 不认识。点 chip
看那条探针长什么样。
这页在不同浏览器长得不一样——这正是重点。 同一份 CSS, Chrome / Safari / Firefox 认识的函数集合并不相同（尤其 random() / progress() / if() / sibling-index() 这批新函数）。判断「能不能放心用」看
Baseline 状态，渐进增强则靠 @supports——它和这页用的 CSS.supports() 是同一套判定的 CSS / JS 两个入口。
两个容易混淆的点： rgba() / hsla() 没单列，它们只是 rgb() / hsl() 的同义别名（现代语法里 alpha 直接写在斜杠后：rgb(0 0 0 / 0.5)）; rem() 是「求余 remainder」函数，和长度单位 rem (root em)
同名不同物——写成 rem(10px, 3px) 带括号的才是函数。
1 · 🔗 相关链接
- CSS value functions · developer.mozilla.org——本页分类与清单的出处，每个函数都有专页可点。
- CSS.supports() · developer.mozilla.org——本页实测手段：把 (property, value) 交给浏览器解析器测试，返回认不认。
-
<image>· developer.mozilla.org——image 一类的统一出口：url()/<gradient>/image()/image-set()/cross-fade()/element()都是它的取值，凡接受<image>的属性都通用。