css 怎么取数字整数
CSS 本身没有 Math.floor() 这种函数。你写 width: floor(3.7px)，数字浏览器会直接忽略整条声明。整数但现实里确实有把小数变整数的数字需求——比如用 calc() 算出一堆小数，想取整避免半像素模糊；或者用 CSS 变量传了个 2.8rem，整数想变成 2rem。数字那到底能不能做？整数能，但路子比较窄，数字而且大多数方案只对特定场景有效。整数
最直接的数字工具：round()、floor()、整数ceil()
2023 年开始，数字主流浏览器陆续支持了 CSS 数学函数 round()、整数floor()、数字ceil()。它们写在 calc() 内部或者直接用在数值属性上。比如：
这三个函数的行为和编程语言里几乎一样。floor() 向下取整，ceil() 向上取整，round() 四舍五入。但注意：它们只接受一个数值参数，不能直接对百分比或 auto 用。如果你写 width: floor(50%)，浏览器会报错。所以想对百分比取整，得先转成像素——但 CSS 运行时拿不到父容器实际像素值，这条路基本走不通。
另外，round() 还支持第二个参数指定精度，比如 round(13.7px, 5px) 会返回 15px。这个设计有点意思，但实际写页面很少用到。
兼容性是个坎
Chrome 从 125 版本开始支持，Firefox 从 118，Safari 从 15.4。现在是 2025 年，新项目基本可以放心用。但如果要兼容旧版安卓 WebView 或者某些国产浏览器内核，就得留个 fallback。我自己的习惯是：先写普通值，再用 @supports 包一层取整写法。
这样旧浏览器拿到 12.7px，新浏览器拿到 12px。虽然差 0.7px 肉眼几乎看不出，但如果你在算网格对齐或者动画步长，这点差别就可能造成累积误差。
没有原生函数时，用 calc 和变量硬凑？
在 floor() 普及之前，有人尝试用 calc() 配合取模来模拟整数。比如想取 var(--n) 的整数部分，写 calc(var(--n) - mod(var(--n), 1))。但 mod() 也是新函数，而且对负数的行为跟编程语言不一样。更早的时候有人用 calc(var(--n) / 1)——这根本没用，除法只改变单位，不改变小数。还有人用 transform: translateX(calc(var(--x) * 1px)) 然后靠 will-change 触发 GPU 取整？那是玄学，浏览器渲染管线里像素对齐是另一回事，跟 CSS 数值取整没关系。
我见过一个取巧办法：用 clip-path 或者 mask 把小数部分裁掉？那是视觉裁剪，不是数值取整。比如 width: 12.7px 的元素，用 clip-path: inset(0 0.7px 0 0) 看起来像 12px，但布局占位还是 12.7px，后续元素位置会偏。这种“假取整”在简单静态页面能糊弄，一旦涉及 flex 或 grid 就露馅。
真正靠谱的场景：配合 CSS 变量和 @property
如果你用 @property 注册了一个 <number> 类型的变量，然后想取整后再赋给 width，可以这样写：
注意这里 floor(var(--raw)) 返回的是无单位数字，必须乘 1px 才能变成长度。如果你直接写 width: floor(var(--raw))，浏览器会认为你在给宽度赋一个纯数字，无效。这个细节坑过不少人。
另外，floor() 不能嵌套在 calc() 里面再跟其他单位混合运算？可以，但写法要规范。比如 calc(floor(10.3) * 1px + 2px) 是合法的，结果是 12px。但 floor(10.3px + 2px) 也合法，结果一样。区别在于前者先取整再相加，后者先相加再取整。大多数时候结果相同，但遇到负数或者 .5 边界时会有差异。我一般选择先取整再运算，逻辑更清晰。
一个实际踩过的坑
去年做数据可视化，用 CSS 变量控制柱状图高度。后台传过来的是小数百分比，比如 --h: 33.3333%。我想让每个柱子高度取整到 1%，避免相邻柱子因为亚像素渲染出现模糊。当时写了 height: floor(var(--h))，结果整个图表塌了。原因就是 floor() 对百分比无效，浏览器直接丢弃了这条声明。后来改成在 JS 里算好整数再传变量，CSS 只负责显示。所以别指望 CSS 能处理所有取整需求，该用 JS 的时候别硬扛。
如果你的场景是响应式布局，需要根据视口宽度动态取整，那更推荐用 clamp() 或者媒体查询直接给整数值。CSS 取整函数适合处理那些“已知是小数、但想变成整数”的静态或半静态值，不适合做复杂运行时计算。
最后提一句：round() 的舍入规则是“四舍五入”，但遇到 .5 时向远离零的方向舍入。比如 round(2.5) 得 3，round(-2.5) 得 -3。这跟 JavaScript 的 Math.round(-2.5) 得 -2 不一样。如果你从 JS 迁移逻辑到 CSS，这点差异可能导致边界 bug。