round()、mod()、rem() 仍处css cr阶段，主流浏览器部分支持但负值行为不一致；round()默认nearest策略且中点向上取整；mod()返回非负余数，rem()符号同被除数；单位必须统一，calc()中嵌套需严格空格与单位匹配。
round()、mod()、rem() 目前（2026年4月）仍处于 CSS 候选推荐标准（CR）阶段，Chrome 123+、Safari 17.4+、Firefox 125+ 支持，但 Safari 对 mod() 和 rem() 的负值行为有偏差，生产环境慎用。
round() 的策略参数和常见误用
很多人以为 round(10px, 3px) 就是四舍五入到 3px 的倍数，其实它默认使用 nearest 策略，等价于 round(nearest, 10px, 3px) → 9px（因为 9px 比 12px 更接近 10px）。但注意：当数值正好在中间（如 round(nearest, 10.5px, 3px)），浏览器按“向上取整”处理，结果是 12px，不是 9px。
容易踩的坑：
-
round(down, -5px, 2px)返回-6px（不是-4px），因为Math.floor(-5 / 2) = -3，再 ×2 得 -6 - 省略策略时不能省略逗号：
round(10px, 3px)合法，但round(10px 3px)是语法错误 - 单位必须一致：
round(100%, 20px)会报错，%和px不能混用
mod() 和 rem() 的行为差异与负值陷阱
mod(A, B) 和 rem(A, B) 都返回「A 除以 B 的余数」，但定义不同：
-
mod(140px, 90px)→50px（标准模运算，结果 ∈ [0, |B|)） -
rem(-140px, 90px)→-50px（IEEE 754 余数，符号同被除数 A） -
mod(-140px, -90px)→-50px（注意：Safari 17.4 返回40px，不一致）
关键区别在于：当你需要「始终非负的偏移量」（比如做循环动画 offset），用 mod()；需要「保持原始符号的余数」（比如坐标归一化），才考虑 rem()。但后者兼容性更差，目前仅 Chrome 完全可靠。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
在 calc() 中嵌套使用时的单位与空格规则
这三个函数可以嵌套进 calc()，但必须严格遵守单位约束和空格要求：
-
width: calc(round(100vw, 10px) - 20px)✅ 合法（round()返回带单位值，可参与减法） -
width: calc(round(100vw, 10px) - 20)❌ 报错（20缺少单位，无法与px运算） -
margin: calc(mod(100vh, 50px) + 10px)✅ 可用，但 Firefox 125 对mod()在calc()内部的解析偶尔丢精度
另外，+ 和 - 两侧必须有空格，哪怕在函数内部：round(nearest, 10px + 2px, 5px) 合法，round(nearest, 10px+2px, 5px) 会解析失败。
移动端适配中替代方案更稳
虽然 clamp()、min()、max() 已广泛支持，但想用 round() 实现“栅格对齐”或用 mod() 做视口分段，实际项目里仍建议降级：
- 用
clamp(375px, 100vw, 768px)替代round(100vw, 375px)控制容器宽度 - 用媒体查询 + CSS 变量模拟
mod()行为：@media (max-width: 375px) { :root { --offset: 0; } } - 若真需阶梯计算，优先用 JS 计算后写入
style或 CSS 变量，比依赖原生函数更可控
真正麻烦的不是语法，而是不同浏览器对负数、零间隔、单位混合的处理尚未完全收敛——哪怕文档写了“已实现”，实际渲染仍可能差 1px 或符号翻转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
