HTML/CSS不支持pow()、sqrt()、log()、exp()等数学函数，必须用JavaScript计算后通过style或CSS自定义属性注入；CSS仅支持calc()、min()、max()、clamp()及实验性三角函数。
HTML里根本不能直接用 pow() sqrt() log() exp()
这些函数不是CSS原生支持的数学函数，也不是HTML能执行的。你在CSS里写 calc(pow(2, 3)) 或 sqrt(16) 会直接被浏览器忽略——CSS目前（截至2024年）只支持 calc()、min()、max()、clamp()，以及实验性但尚未广泛支持的 sin() / cos() / tan()（需启用 flag，且不支持 log 或 exp）。pow() 等属于 JavaScript 运行时函数，CSS 没有求幂或对数计算能力。
想在页面中做 pow()/sqrt() 变换，必须靠 JavaScript
真实可行路径只有一条：用 JS 计算数值，再把结果写入 style 或 class。比如控制元素尺寸、透明度、旋转角度等依赖非线性变换的场景：
-
sqrt()常用于将线性输入（如用户滑块值 0–100）映射为更平缓的视觉变化（如缩放 0–10） -
pow(x, 0.5)和sqrt(x)效果一致，但 JS 中Math.sqrt()更快、更安全（不会因负数触发 NaN） -
log()适合压缩大范围数据（如响应式字体大小从 12px 到 96px，用12 + Math.log(value) * 8避免跳变） -
exp()可反向拉伸小数值（如把 0–1 的进度映射为指数增长的 opacity 或 transform）
示例：用 sqrt() 平滑响应滑块
scale(${scale})
CSS 自定义属性 + JS 是最干净的协作方式
不要在 JS 里拼接大量内联样式。把计算结果设为 CSS 自定义属性，再在 CSS 中消费它——这样逻辑分离，动画也更容易用 transition 或 @property 控制。
- JS 中设置：
element.style.setProperty('--scale-raw', String(Math.sqrt(v))) - CSS 中使用：
transform: scale(calc(var(--scale-raw) / 5)); - 注意：
calc()不能调用 JS 函数，但可以对已知数值做四则运算和单位换算 - 若需动画插值（比如
sqrt()变化过程本身要缓动），得用requestAnimationFrame或 Web Animations API，CSS transition 对非线性函数无感知
别踩坑：负数、NaN、单位混用
这些函数对输入极其敏感，出错不报错，只让样式消失或卡死：
-
Math.sqrt(-1)→NaN→transform: scale(NaN)→ 元素不可见（但控制台没提示） -
Math.log(0)→-Infinity；Math.log(-5)→NaN；务必加Math.max(0.001, x)保护 - CSS 中
calc()不接受无单位数字参与带单位运算，比如calc(var(--val) * 1px)合法，但calc(sqrt(var(--val)) * 1px)非法（因为sqrt根本不存在） - 浏览器 DevTools 的 computed 样式里看不到自定义属性计算过程，调试时优先 console 打印中间值
真正复杂的数值变换（比如贝塞尔映射、分段函数、实时归一化）基本都得在 JS 层闭环处理，CSS 只负责呈现最终数字。别试图用 CSS “模拟”数学库——它不是设计来干这个的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
