mod()仅在CSS中生效且需单位一致、非负参数才安全；HTML中不可用，多数属性须嵌套calc()，负值和混合单位会导致兼容性问题。

mod() 函数目前不能在 HTML 中直接使用，它只在 CSS 里生效，且必须配合 calc() 或直接作为属性值（如 line-height、rotate）使用；HTML 标签本身不解析 mod()，写在 style 属性或外部样式表中才起作用。

mod() 必须和 calc() 搭配才能用于动态计算

单独写 mod(10px, 3px) 在某些属性（如 line-height）中可直接用，但多数布局类属性（width、left、grid-column）要求包裹在 calc() 里，否则会解析失败。

• width: mod(100%, 20%); ❌ 大部分浏览器不支持（非标准属性值位置）
• width: calc(mod(100%, 20%)); ✅ 合法，等价于 width: 0;
• left: calc(var(--i) * 50px - mod(var(--i) * 50px, 200px)); ✅ 常用于循环偏移对齐
• 注意 calc() 内部空格不能省：mod(100%,20%) 是语法错误，必须写成 mod(100%, 20%)

单位必须严格一致，否则报错

mod() 不做单位换算，mod(100px, 1rem) 会直接导致声明无效（浏览器跳过该行），即使根字号是 16px 也不行。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• ✅ padding: mod(90px, 25px);（同为 px）
• ✅ rotate: mod(360deg, 90deg);（同为 deg）
• ✅ margin: mod(20%, 7%);（同为 %）
• ❌ margin: mod(20px, 7%);（混合单位 → 无效）
• ⚠️ mod(1000px, 29rem) 看似能算（Chrome 会按当前 1rem = 16px 换算），但属于未定义行为，Safari 和 Firefox 可能拒绝解析

负值结果依赖浏览器实现，生产环境慎用

mod(-70deg, 20deg) 在 Chrome 返回 10deg，Safari 17.4 却返回 -10deg —— 因为 Safari 对负被除数的 floor() 行为处理不一致。这不是 bug，而是 CR 阶段标准尚未强制统一。

立即学习“前端免费学习笔记（深入）”；

• ✅ 安全用法：所有参数非负，例如 animation-delay: mod(var(--t), 3s);
• ⚠️ 风险用法：含负值时，必须用 Cypress 或 Playwright 实际跑多浏览器验证，不能只看 Chrome 表现
• ❌ 避免依赖符号：比如 transform: rotate(mod(var(--angle), -90deg));，除数为负时结果符号不可控
• 替代思路：用 JavaScript 计算后写入 style 属性，或用 clamp() + calc() 模拟简单取模逻辑

真正容易被忽略的点是：mod() 的「除数决定结果符号」这一规则，在动画循环、网格列偏移、响应式刻度对齐等场景中，一旦设计依赖负余数行为，上线后可能在 Safari 上整体错位一格——而开发者本地开发时根本看不到问题。