CSS 数学函数生成器
可视化生成 CSS 数学函数（exp / log /
sqrt / pow / abs /
sign / mod / rem /
round，CSS Values Module Level 4，
Chrome 128+ / Firefox 128+ / Safari 16.4+ 起支持，Baseline 2024）。
内置8 组预设场景：指数缩放、对数刻度、平方根渐变、幂律缓动、
绝对值镜像、模运算条纹、取整对齐、rem 与 mod 对比——参数实时调节，iframe 沙箱预览真实渲染。
附带函数速查表：语法、参数范围、返回值、浏览器支持一目了然。
适用于指数增长字号、对数刻度进度条、平方根径向渐变、幂律缓动曲线、镜像对称布局、
模运算循环条纹、网格步长对齐等现代 CSS 场景。所有处理在浏览器本地完成。
指数缩放
exp() 让字号随标题级别指数增长，h1 比 h6 大 e 倍以上
| 函数 | 语法 | 说明 | 返回值 |
|---|---|---|---|
exp | exp(<x>) | 自然常数 e 的 x 次方，e ≈ 2.71828 | 返回 (0, +∞) |
log | log(<x>, <base>?) | 对数，省略 base 时为自然对数 ln | 返回 (-∞, +∞) |
sqrt | sqrt(<x>) | 平方根，等价于 pow(x, 0.5) | 返回 [0, +∞) |
pow | pow(<x>, <y>) | x 的 y 次方 | 返回 (-∞, +∞) |
abs | abs(<x>) | 绝对值，去除符号 | 返回 [0, +∞) |
sign | sign(<x>) | 符号函数，判断正负零 | 返回 {-1, 0, 1} |
mod | mod(<x>, <y>) | 模运算，结果符号与 y 相同 | 符号同 y |
rem | rem(<x>, <y>) | 余数，结果符号与 x 相同 | 符号同 x |
round | round(<策略>, <x>, <step>?) | 按策略取整，策略可选 nearest/to-zero/up/down | 返回 step 整数倍 |
浏览器支持：Chrome 128+ / Firefox 128+ / Safari 16.4+（Baseline 2024）。 参数与返回值均为无单位数值，需配合calc() 用于带单位的 CSS 属性。
/* 标题字号指数增长：每升一级 ×e^(step)
h1=base*exp(3*step) h2=base*exp(2*step) ... h6=base */
.heading {
--base: 16;
--step: 0.6;
}
.heading h1 { font-size: calc(var(--base) * exp(calc(3 * var(--step)))); }
.heading h2 { font-size: calc(var(--base) * exp(calc(2 * var(--step)))); }
.heading h3 { font-size: calc(var(--base) * exp(var(--step))); }
.heading h4 { font-size: calc(var(--base) * exp(calc(-1 * var(--step)))); }
.heading h5 { font-size: calc(var(--base) * exp(calc(-2 * var(--step)))); }
.heading h6 { font-size: var(--base); }常见问题
什么是 CSS 数学函数？它包含哪些函数？
CSS 数学函数是 CSS Values Module Level 4 引入的一组数学运算函数，
与 calc() 配合使用，把原本需要 JavaScript 的数学计算下沉到 CSS。
主要分为四类：
- 指数对数：exp(x)（e 的 x 次方）、log(x, base?)（对数）、
sqrt(x)（平方根）、pow(x, y)（x 的 y 次方）
- 符号处理：abs(x)（绝对值）、sign(x)（符号函数）
- 余数运算：mod(x, y)（模运算，符号同 y）、
rem(x, y)（余数，符号同 x）
- 取整运算：round(策略, x, step?)，策略含 nearest / to-zero / up / down
这些函数从 Chrome 128+ / Firefox 128+ / Safari 16.4+ 起原生支持，已进入 Baseline 2024。
配合三角函数（sin / cos / atan2 等），
构成完整的 CSS 数学函数体系。
CSS 数学函数的参数与返回值是什么类型？怎么用于带单位的属性？
参数与返回值都是无单位数值（<number>），
不能直接传入带单位的值（如 exp(10px) 无效），需要先在
calc() 中处理单位：
- 错误写法：width: exp(10px);（参数不接受长度）
- 正确写法：width: calc(exp(2) * 10px);
（exp(2) ≈ 7.389，再乘以 10px 得 73.89px）
与带单位的值做运算：通常用 calc() 把无单位结果乘以单位，
或先除以单位转换为数值：
- 计算百分比进度：width: calc(log(var(--v)) / log(var(--max)) * 100%);
- 计算带单位的位移：transform: translateX(calc(pow(var(--t), 2) * 200px));
易错点：round() 的第三个参数 step 也必须是无单位数值，
若要对带单位的值取整，需在 calc 外层处理，或用
round(nearest, calc(var(--w) / 1px), 8) * 1px 这种写法。
exp() 与 pow() 有什么区别？怎么选择？
关系：exp(x) 等价于 pow(e(), x)，
即固定以自然常数 e 为底。两者返回值完全相同：
- exp(2) = pow(e(), 2) ≈ 7.389
- exp(0) = pow(e(), 0) = 1
选择标准：
- 底数固定为 e（自然指数场景）：用 exp()，
语义更清晰，例如指数衰减 exp(-1 * var(--t))、指数增长
exp(var(--step) * 3)；
- 底数是其他值（如 2、10）：必须用 pow()，
例如平方 pow(x, 2)、立方 pow(x, 3)、
常用对数近似 pow(10, var(--n))；
- 等价于平方根：sqrt(x) 比 pow(x, 0.5) 更直观，优先用 sqrt。
性能：浏览器实现中 exp 通常有专门优化，比通用 pow 略快，
但 CSS 中差异可忽略。
log() 函数的 base 参数怎么用？怎么计算常用对数？
语法：log(x, base?)，第二个参数 base 可省略。
- 省略 base：默认以 e 为底，即自然对数 ln。
log(e()) = 1，log(10) ≈ 2.303
- 指定 base：计算以 base 为底的对数。例如
log(1000, 10) = 3（常用对数 lg），
log(8, 2) = 3（以 2 为底）
常用对数（lg）：log(x, 10)
二进制对数（lb）：log(x, 2)
典型用途：
1. 对数刻度进度条：把 1..max 的值压缩到 0..100%，
width: calc(log(var(--v), 10) / log(var(--max), 10) * 100%)；
2. 分贝计算：10 * log(power / refPower, 10)；
3. 数据可视化：把指数增长的数据线性化，便于在屏幕中展示。
mod() 与 rem() 在负数场景下有什么区别？
两者都计算余数，但结果符号不同，这是数学定义的差异：
- rem(x, y) 结果符号与 x 相同，定义为
x - y * trunc(x / y)（trunc 向零取整）
- mod(x, y) 结果符号与 y 相同，定义为
x - y * floor(x / y)（floor 向负无穷取整）
正数场景两者结果相同：mod(7, 3) = rem(7, 3) = 1
负数场景差异明显：
- mod(-7, 3) = 2（符号同 y=3，正）
- rem(-7, 3) = -1（符号同 x=-7，负）
选择建议：
- 需要循环周期语义（如条纹、角度循环）：用 mod，
结果总是 [0, |y|) 范围，循环连续；
- 需要截断余数语义（保留被除数符号方向）：用 rem，
与 JavaScript % 行为一致。
本工具的"rem 与 mod 对比"预设可实时调节 x、y 观察差异。
round() 函数的四种策略是什么？分别用在什么场景？
语法：round(<策略>, <value>, <step>?)，
step 省略时默认为 1。
四种策略：
- nearest：四舍五入到最近的 step 整数倍。例如
round(nearest, 17, 8) = 16（17 离 16 vs 24 更近）
- to-zero：向零方向取整到 step 整数倍。例如
round(to-zero, 17, 8) = 16，round(to-zero, -17, 8) = -16
- up：向上取整（向正无穷方向）。例如
round(up, 17, 8) = 24，round(up, -17, 8) = -16
- down：向下取整（向负无穷方向）。例如
round(down, 17, 8) = 16，round(down, -17, 8) = -24
典型场景：
- 网格对齐：round(nearest, var(--w), 8px) 让任意宽度吸附到 8px 网格；
- 键盘焦点步进：用 round(up, var(--t), 0.1) 强制时间到下一刻度；
- 响应式断点：把视口宽度吸附到预设断点，避免微小变化触发响应式切换。
注意：step 必须是无单位数值，若要处理带单位的值需在 calc 中转换单位。
CSS 数学函数的浏览器兼容性如何？旧浏览器怎么降级？
兼容性（截至 2026 年）：exp / log / sqrt / pow / abs / sign / mod / rem / round
从 Chrome 128+ / Firefox 128+ / Safari 16.4+ 起支持，已进入 Baseline 2024，
主流浏览器最新版本均已覆盖，生产环境可放心使用。
降级策略：与所有 CSS 数学函数一样，不支持的浏览器会把整个声明视为无效，
需要显式提供回退：
1. 先写静态回退声明：.demo { width: 80%; }
2. 再用数学函数覆盖：.demo { width: calc(log(var(--v)) / log(var(--max)) * 100%); }
旧浏览器停留在 80%，新浏览器按对数计算。
也可用 @supports (width: calc(log(10) * 1px)) 做特性检测，
仅在支持时应用复杂逻辑。
渐进增强建议：对于装饰性效果（如指数增长字号、对数刻度进度条），
降级到固定值不影响核心功能；对于功能性计算（如网格对齐），
可用 @supports 检测后切换布局策略。
这个工具的预览安全吗？数据会上传吗？
完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 预设切换、参数调节、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，HTML 与 CSS 完全隔离在 iframe 内，
不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox="allow-same-origin" 属性限制能力，
预览内容无法执行脚本、提交表单或访问父页面（不含 allow-scripts）。
- 生成的 CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
- 不读取 navigator 等浏览器信息，不写入 Cookie，无任何追踪行为。
无需注册、无需登录、无广告，适合处理任何 CSS 数学函数与生产场景。