css本身不支持pow、sqrt、exp等指数函数，仅靠calc()无法实现真指数运算；需用javascript动态计算后通过css自定义属性传值，或用贝塞尔曲线模拟非线性效果。
HTML里没法直接写CSS指数函数
CSS本身不支持 pow、sqrt、exp 这类数学函数——它连基础的四则运算都要靠 calc() 拼凑，更别说指数运算了。你看到的“CSS指数效果”，实际是用 JavaScript 动态计算后赋值，或用 CSS 自定义属性（--var）配合 calc() 做近似模拟。
用 calc() + 自定义属性硬凑平方根和平方
calc() 只支持加减乘除和括号，不能开方或求幂。但如果你只需要固定次方（比如平方、平方根的近似），可以靠预设系数或分段逼近：
- 平方：可用
calc(var(--x) * var(--x))，前提是--x是纯数字（无单位），且你控制输入范围 - 平方根：没有原生方法，常见 hack 是用
clamp()+ 多个calc()分段拟合，例如sqrt(x) ≈ 0.5 * x + 0.5（仅在 x ∈ [0,1] 附近勉强可用） - 注意：所有参与
calc()运算的值必须单位一致或无单位；混用px和rem会直接失效
真正需要 pow/sqrt/exp？上 JavaScript
浏览器 DOM 支持完整的 Math.pow()、Math.sqrt()、Math.exp()，这是唯一可靠路径：
- 动态更新样式：用
element.style.setProperty('--computed-value', Math.sqrt(x))，再在 CSS 里用var(--computed-value) - 动画场景：CSS 关键帧无法调用 JS 函数，必须用
requestAnimationFrame手动更新自定义属性 - 性能提示：频繁调用
Math.exp(x)（尤其 x > 10）可能溢出，建议加if (x > 700) return Infinity防崩
别被“CSS 函数”误导：pow 不是标准，sqrt 在草案里躺了五年
CSS Values and Units Level 4 草案确实提过 pow()、sqrt()、hypot()，但截至 2024 年，Chrome/Firefox/Safari 全部未实现。你在 DevTools 里输 pow(2, 3) 会直接报错 Invalid property value。
- 查兼容性请认准 caniuse.com/css-math-functions —— 当前只列了
calc()、min()、max()、clamp() - 社区 polyfill（如 css-vars-ponyfill）也不支持这些函数，因为解析层根本没暴露对应语法节点
- 真要实验性尝鲜，只能用 PostCSS 插件在构建时静态计算，但失去运行时响应能力
最常被忽略的一点：所谓“CSS 指数动画”，99% 是用贝塞尔曲线（cubic-bezier(.2, .8, .4, 1)）模拟的非线性缓动，不是真算指数函数。想精确控制，绕不开 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
